javascript - 看不到附加的事件功能，但 noop

Question

问题是，虽然我handleClear在下面的类中附加了事件（例如），但是，当我检查onClick按钮 dom 中的事件时，它显示的是一个空方法noop() {}。结果，它无法按预期清除。

奇怪的是，有时如果我设置断点，处理程序方法就会在那里。我怀疑事件附件与时间有关。但我无法确定附加事件功能的时间和地点。任何人都可以提供一些解决这个问题的提示吗？或者提供一些见解？

class ClearHistory extends PureComponent {

    handleCancel = () => {
        console.log('handleCancel');
    }

    handleClear = (event) => {
        console.log('handleClear');
    }

    render() {

        return (
            <div>
                <Button key='cancel' type='button' onClick={this.handleCancel} >
                    Cancel
                </Button>
                <Button key='remove' type='button' onClick={this.handleClear} >
                    Clear
                </Button>
            </div>
        );
    }
}

标签： javascriptreactjsonclickdom-events

Answer 1

我创建了沙箱来测试您的组件，并重命名为 html 标记，因为该组件没有任何 ui-library。

https://codesandbox.io/s/clearhistory-fq69b?file=/src/ClearHistory.js

它有效，但是：

这很好，因为反应本身负责事件绑定。

https://the-guild.dev/blog/react-dom-event-handling-system