为什么当我保留正在使用的事件时，setTimeout 不起作用？

Question

这是我的父组件

ReactDOM.render(
<div>
<CoordinatesButton onReceiveCoordinates={ mouseCoordinates => console.log(mouseCoordinates) } />
<DelayedButton onDelayedClick={ event => console.log(event) } delay={1500} />
</div>,
document.getElementById('global')

现在我有两个子组件。延迟按钮

export default class DelayedButton extends React.Component {
handleClick = (e) => {
e.persist()
setTimeout(this.props.onDelayedClick(e), this.props.delay)
};
render() {
return (
<button onClick={this.handleClick}>
DelayedButton
</button>
);
};
};

和协调按钮

export default class CoordinatesButton extends React.Component {
handleClick = (event) => {
this.props.onReceiveCoordinates([event.clientX, event.clientY])
};
render() {
return (
<button onClick={this.handleClick}>
CoordinatesButton
</button>
);
};
};

只有CoordinatesButton有效。

onDelayedClick的props返回Callback must be a function. Received undefined.的错误onDelayedClick={ event => console.log(event) }显然是一个函数，因为当我控制台记录它时，它会记录

onDelayedClick(event) {
return console.log(event);
}

为什么会这样，我该怎么办才能解决这个问题？

Answer 1

setTimeout需要一个函数作为其第一个参数(请阅读docs[1](。您正在原地调用函数this.props.onDelayedClick，返回undefined，因此收到错误Callback must be a function. Received undefined.。

将this.props.onDelayedClick(e)调用封装在函数中：

setTimeout(() => this.props.onDelayedClick(e), this.props.delay)

[1]https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout