React-合成事件

React-合成事件

最近在项目中遇到这样一个问题, 代码如下

 <Input.Search
            disabled={queryGroupLoading}
            onSearch={this.handleSearch}
            onChange={e => {
              this.setState({ groupName: e.target.value }, () => {
                if (e.target.value === '') {
                  this.queryGroup();
                }
              });
            }}
            style={{ width: 200, marginRight: 10 }}
            placeholder='请输入'
  />

然后界面就报了如下错误

我又试了下,在this.setState的外部打印事件, 能成功获取到这个事件， 那为什么在this.setState()的回调里面拿不到呢?

然后我又在这个回调里面打印了下这个事件,发现了原因

从图中我们可以看到,事件对象的 target 属性是 null, 这下就找到了原因, react官方文档有说明，react 的事件对象 e 是一个合成事件。

似乎不太能理解？可以简单的理解为 React 为了性能考虑，避免 Dom 事件滥用，
同时屏蔽底层不同浏览器之间的事件系统差异，实现了一个中间层——SyntheticEvent（合成事件）。

image

如上图所示，event对象是复用的，事件处理函数执行完后，属性会被清空，所以event的属性无法被异步访问， 然后我们知道， this.setState() 方法是异步的。于是就会出现上面那种情况, 拿到的事件对象的属性全都为 null.

如果想要移除合成事件, 官方也提供了一个方法 event.persist(), 这个方法会从事件池中移除该合成事件, 允许用户代码保留对该事件的引用。

<Input.Search
            disabled={queryGroupLoading}
            onSearch={this.handleSearch}
            onChange={e => {
              e.persist();
              this.setState({ groupName: e.target.value }, () => {
                if (e.target.value === '') {
                  this.queryGroup();
                }
              });
            }}
            style={{ width: 200, marginRight: 10 }}
            placeholder=‘请输入’
          />

更详细的内容可以去看官方文档: enter link description here