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

Answer 2

试试这个：

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

}

根据您的代码判断我认为您使用的是 babel-plugin-transform-class-properties 。在这种情况下，您不需要构造函数部分。

Answer 3

如果没有看到你的onKeypress方法很难说，但它可能是一个具有约束力的问题。尝试在构造函数中绑定搜索。

constructor (props) {
    super(props);

    this.timeout = null;
    this.search = this.search.bind(this);
}

Answer 4

你打算将timeout作为州吗？

我的建议就像这样

constructor(props) {
    super(props);
    this.state = {
       timeout: null
    }
}

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

}

Answer 5

SyntheticEvent - React

<块引用>

注意：从 v17 开始，e.persist() 不会做任何事情，因为 SyntheticEvent 不再被合并。

在 React v17 之后，SyntheticEvent 不再取消事件。

在回调中访问event.target

5 个答案: