在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
：

SyntheticEvent已合并。这意味着在调用事件回调之后，将重新使用SyntheticEvent对象，并且所有属性都将无效。这是出于性能原因。

例：

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

如何访问回调中的值？

将值存储在变量中：

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

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