javascript - 在 react 中访问回调内部的 event.target

Question

我有以下类片段:

constructor(props) {
    super(props);

    this.timeout = null;
}

search = (e) => {
    clearTimeout(this.timeout);
    this.timeout = setTimeout(
        function(){ console.log(e.target); },
        500
    );
}

<input 
    type="text" 
    placeholder="Search by title or author" 
    onKeyPress={this.search} />

我无法获得设置的超时时间来打印事件的值，是否有我应该做但我没有做的事情？

Answer 1

SyntheticEvent .

根据 DOC :

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons.

例子:

function onClick(event) {
   console.log(event.type); // => "click"
   const eventType = event.type; // => "click"

   setTimeout(function() {
      console.log(event.type); // => null
      console.log(eventType); // => "click"
   }, 0);    
}

How to access the values inside callback?

在变量中存储值:

如果您想访问超时回调函数中的值，则将值存储在变量中并使用该变量而不是直接使用事件对象。

function onClick(event) {

   console.log(event.type); // => "click"

   const { type } = event;

   setTimeout(function() {
      console.log(type);   // => click
   }, 0);    
}

使用 event.persist():

如果你想以异步方式访问事件属性，你应该在事件上调用event.persist()，这将从池中删除合成事件并允许引用事件由用户代码保留。

function onClick(event) {

   event.persist();

   console.log(event.type); // => "click"

   setTimeout(function() {
      console.log(event.type); // => click
   }, 0);    
}