React Semantic UI Table 单元格不响应 onClick

Question

我的功能性 React 组件中有一个 Semantic UI Table。我想处理单个单元格的 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>
    )   
}

相反，我在首次呈现组件时看到一个 "Clicked" 日志。在那之后，没有其他事情会导致单元写入控制台。

这听起来像是中描述的问题。问题是与 class 组件的绑定不正确，但我使用的是功能组件，所以这对我来说不是问题。

如何重写这个最小 table 以便处理 onClick 事件？

Answer 1

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

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

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

React Semantic UI Table 单元格不响应 onClick

React Semantic UI Table Cell Does not Respond to onClick

onclick

reactjs

semantic-ui