react16事件池机制引发的异常

106 阅读1分钟

问题

<Input placeholder={'搜索变量'} onChange={_.debounce(e => setSearchText(e.target.value), 200)}></Input>

报错是e.target是null

原因

react16为使事件对象可以复用,采用事件池机制,事件被合成后,使用事件池中的对象进行dispatch,在脱离react调度范围后这些事件都会被清空.因此异步代码无法获取事件

解决

提前在同步代码中获取值即可

const debounceSetSearchText = _.debounce(text=>setSearchText(text),200)

<Input placeholder={'搜索变量'} onChange={e => debounceSetSearchText(e.target.value)}></Input>