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
