Почему setTimeout не работает, когда я сохраняю событие, которое использую? - PullRequest
Новая
       6

Почему setTimeout не работает, когда я сохраняю событие, которое использую?

0 голосов
/ 21 февраля 2020

Вот мой родительский компонент 

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

Теперь у меня есть два дочерних компонента. Работает DelayedButton 

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>
      );
    };
};

и CoordinatesButton 

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 возвращает ошибку Callback must be a function. Received undefined. onDelayedClick={ event => console.log(event) } это определенно функция, потому что когда я консоль регистрирую ее, она регистрирует 

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

Почему это так и что я могу сделать, чтобы это исправить?

1 Ответ

3 голосов
/ 21 февраля 2020

setTimeout ожидает функцию в качестве первого аргумента (см. Документацию [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

...