react初探-e.target为null_react e.target null-优快云博客

本文链接：https://blog.youkuaiyun.com/laishaojiang/article/details/108589006

本文介绍了一个关于React中合成事件的常见问题，即在处理input输入事件时，事件对象的target属性在某些情况下返回null。文章详细解释了这一问题的原因，并提供了解决方案，即使用event.persist()方法来确保事件对象的持久性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在使用antd的input组件和mobx做一个很简单的功能，获取input中的输入内容，然后传给后端做查询，可偏偏就遇到奇奇怪怪的坑~

删减后的代码大概长这样

  import store from './store'

  class SearchForm extends Component {

  handleSearchInput = e => {
    console.log(e.target.value)
  }
    render() {
      return(
        <Input.Search
          placeholder="支持标题、内容模糊查询"
          value={store.keyword}
          enterButton
          onChange={this.handleSearchInput}
        />
      )
    }
  }

可以说是非常非常简单常见的需求了，在输入的事件中获取输入框的内容。可是当我输入内容时，控制台报错了：
$\color{red}{Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information.}$

此时e.target的值也为null

这就让我有点懵了，在仔细阅读报错信息后找到了一丝线索use event.persist()（所以说遇到报错不要慌，冷静分析报错信息~~）
然后去网上搜素了一下资料，发现原来官网上就有说明~~

注意：
如果你想异步访问事件属性，你需在事件上调用 event.persist()，此方法会从池中移除合成事件，允许用户代码保留对事件的引用。

加上方法后的代码

  import store from './store'

  class SearchForm extends Component {

  handleSearchInput = e => {
    e.persist()
    console.log(e.target.value)
  }
    render() {
      return(
        <Input.Search
          placeholder="支持标题、内容模糊查询"
          value={store.keyword}
          enterButton
          onChange={this.handleSearchInput}
        />
      )
    }
  }

完事~