当我坚持我正在使用的事件时，为什么 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 有效。

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

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

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

Answer 1

setTimeout 需要一个函数作为它的第一个参数（阅读文档 [1]）。您正在就地调用您的函数 this.props.onDelayedClick，returns 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

当我坚持我正在使用的事件时，为什么 setTimeout 不工作？

Why isn't setTimeout working when I persist the event that I'm using?

javascript

settimeout

reactjs