javascript - 使用 onClick 函数检测正在单击的元素

Question

我正在 React 中调试我的代码，但我有一个元素的行为不符合我的预期。

<li onClick={console.log('li element clicked')}>Hello</li>

我只是想检测是否单击了特定元素，并且我希望当我单击此 li 元素时，它应该在我的控制台中记录消息“li element clicked”。然而，情况似乎并非如此。请帮忙？

<小时/>

不知何故，通过使用bind(this)解决了我的问题，但是，我不完全明白为什么。

这是代码示例:

export class InputQuestion extends React.Component{
constructor(props) {
    super(props)
    this.state = {
        value: '',
    };
}

handleClick = () => {
    console.log('li 1 clicked');
}

render(){
    return (
        <Container>
            <li onClick={this.handleClick.bind(this)}>Hi</li>
            <li onClick={console.log('li 2 clicked')}>Hello</li>
        </Container>
    )
}

}

Answer 1

您需要将其作为函数来执行，例如

<li onClick={() => console.log('li 2 clicked')}>Hello</li>

并且由于您的 handleClick 函数是一个箭头函数，因此它已经绑定(bind)到 this，因此您可以执行以下操作:

<li onClick={this.handleClick}>Item 1</li>