javascript - 看不到附加的事件函数，但是没有

Question

问题是，虽然我在下面的类中附加了事件(例如 handleClear)，但是，当我检查按钮 dom 中的 onClick 事件时，它显示一个空方法 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>
        );
    }
}

Answer 1

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

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

它有效但是:

这很好，因为 React 本身负责事件绑定(bind)。

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