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

Question

我有反应功能

<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

您可以将参数传递给setTimeout callback with additional parameters in setTimeout。只需在 }, 1500, event) 后的参数中添加 event 对象，它将在 callback.

中可用

playVideo(event, name) {
    console.log(event, 'event details');
    setTimeout(function (event) {
      console.log(event, 'event details inside timeout'); 
    }, 1500, event) // <- Pass event object from here
}

编辑根据的建议，您可以使用父范围 playVideo 中的 event 对象，只需删除 [=] 中的参数16=] 如下所示。

playVideo(event, name) {
    console.log(event, 'event details');
    setTimeout(function () { // <- Do no add event parameter so event object will be fetch from parent scope.
      console.log(event, 'event details inside timeout'); 
    }, 1500)
}

Answer 2

不要将 event 参数传递给 settimeout 函数，因为它被认为是此范围内的局部变量。

Answer 3

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

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

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

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

event data inside settimeout function is null in reactJs

javascript

settimeout

reactjs