Javascript react组件上的onClick事件不工作

我正在尝试将子组件的id传递给父组件。在子组件中，onClick事件处理程序不工作。我试图在单击某个元素时将一些数据记录到控制台

import React from 'react';

class EachChatInList extends React.Component {
handleClick(event) {
    event.preventDefault();
    console.log("clicked");
}


render() {

    return (
        <li className="tab-link current" data-tab="tab-1" onClick={this.handleClick.bind(this)}>
            <div className="circle_m_nested">&nbsp;</div>
            <div className="count"></div>
            {this.props.chat.seller}
        </li>
    )
}
}

export default EachChatInList;

从“React”导入React；
类EachChatInList扩展了React.Component{
handleClick（事件）{
event.preventDefault（）；
控制台日志（“单击”）；
}
render（）{
返回(
数据tab=“tab-1”onClick={this.handleClick.bind（this）}>
{this.props.chat.seller}

)
}
}
导出默认的EachChatInList；

如何使其工作？

像这样使用它：

onClick={(event) => handleClick(event)}

---

您的组件按原样为我工作：是的，我看到了。但在我的情况下，这是行不通的。在这种情况下，问题在于其他地方，而不是你发布的代码。您是否有任何控制台错误？没有，我没有在控制台中收到任何错误。您绝对肯定a）单击了

s，并且b）没有在控制台中“单击”？您的问题上有一条评论说它对其他人有效。您的控制台中没有JS错误或与这行代码无关的东西吗？为什么您希望这会有所帮助？首先，作用域中没有
handleClick
函数。我正在分享需要在提供的代码上修改的语法。他有一个
handleClick
函数，我建议在我的环境中调用onclick事件@YuryTarabankoThere函数的方法是
this.handleClick
而不是
handleClick
。“我正在分享他代码中需要修改的语法。”为什么OP需要使用箭头函数？在这种情况下，这与使用
bind
有什么不同？这会有什么帮助？这是真的。要使代码正常工作，它需要是在组件外部定义的函数。在过去的绑定onclick事件中，我遇到了一些问题，这是一种适合我的方法，这就是为什么我要分享！