【问题标题】:Why I am not able to access event value in setTimeout?为什么我无法访问 setTimeout 中的事件值?
【发布时间】:2019-06-03 20:13:13
【问题描述】:

有人问过我这个问题。我无法给出正确答案。你能帮帮我吗?为什么 setTimeout 中无法访问 event (e) 的值?

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component{
  state = {
    number: 1,
  }

  handleNumber = (e) => {
    console.log(e)
    setTimeout(() => {
      console.log(e) // It becomes null here.
      if(e) {
      this.setState({number: this.state.number + 1})
      console.log(this.state.number)
    }
  }, 10)
  }

  render() {
    return (
      <div>
        <button onClick={this.handleNumber}>Hello world</button>
      </div>
)}
}

render(<App />, document.getElementById('root'));

【问题讨论】:

  • setTimeout((e) => {...}, 10) 也许通过 e 会起作用?

标签: javascript reactjs settimeout dom-events


【解决方案1】:

您应该能够访问该事件,更有可能您正在尝试访问合成事件的属性,例如 e.type 或类似的东西。因为 React 重用了合成事件对象,所以一旦 handleNumber 函数返回,事件的所有属性都会变为 null。请参阅the docs 了解更多信息。

【讨论】:

  • 在阅读文档后,我对这个问题进行了重新审视,我意识到您在这种情况下是正确的。但是好像所有的属性都是null,是不是上下文的关系?
  • 这就是 React 在内部处理事件的方式。当事件处理程序 (handleNumber) 返回时,它会改变事件实例。所以当超时触发时,属性是null,而不是原来的。
  • 感谢您的回答。我完全忘了查看文档。现在,为什么我无法在 setTimeout 中访问事件值是有道理的。再次感谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-11-19
  • 1970-01-01
  • 2015-01-11
  • 2014-04-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多