javascript - settimeout函数内的事件数据在reactJs中为空

Question

我有一个 react 函数

<button onClick={(e) => this.playVideo(e, name)}>

两个选项都试过了

playVideo(event, name) {
    console.log(event, 'event details');
    setTimeout(function () {
      console.log(event, 'event details inside timeout'); 
    }, 1500)
}

playVideo(event, name) {
    console.log(event, 'event details');
    setTimeout(function (event) {
      console.log(event, 'event details inside timeout'); 
    }, 1500)
}

在上面的代码中，初始事件按预期工作，但我需要 settimout bcaz 中的事件数据我必须根据事件加载几个 js 文件，但 settimeout 函数中的事件数据始终为空。

我也试过 onClickCapture 但还是不行

<button onClickCapture={(e) => this.playVideo(e, name)}>

Answer 1

在 React-v17 之前，由于 Syntethic Event，您需要值在范围内React 中使用的包装器:

playVideo(event) => {
    const { currentTarget } = event;

    // closure on currentTarget won't lose due to synthetic event.
    setTimeout(() => {
      console.log(currentTarget, 'event details inside timeout'); 
    }, 1500)
}