React 语义 UI 表单元格不响应 onClick

Question

我的函数式 React 组件中有一个语义 UI 表。我想处理单个单元格的onClick事件。我希望每次在单元格内单击时，以下内容都会记录到控制台。

import React from "react"
import {Table} from "semantic-ui-react"
const MyComponent = () => {
return (
<Table celled>
<Table.Body>
<Table.Row key="1">
<Table.Cell onClick={console.log("Clicked")}>Cell</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
)   
}

相反，我在首次呈现组件时看到单个"单击"日志。之后，没有其他任何操作会导致单元写入控制台。

这听起来像语义 UI 中描述的问题 反应 选择表单元格不起作用。问题是与类组件的绑定不正确，但我使用的是功能组件，因此这对我来说不是问题。

如何重写此最小表以处理onClick事件？

Answer 1

您需要像这样更改您的onClick：

onClick={() => console.log("Clicked")}

使用onClick={console.log("Clicked")}每次组件呈现时都会执行 onClick 处理程序。