SyntheticEvent已合并。这意味着在调用事件回调之后,将重新使用SyntheticEvent对象,并且所有属性都将无效。这是出于性能原因。因此,您不能以异步方式访问事件。
参考:React中的事件系统
这意味着事件的属性仅在回调处于活动状态时存在。将异步添加到混音或存储事件以供将来使用将失败。
如果console.log(event)在事件处理程序中尝试,则很容易观察到。在您检查对象时,事件对象的大多数属性将为null。如果debugger;在记录该值后立即停止执行脚本,则可以检查这些值。
console.log(event)
null
debugger;
class MyComponent extends React.Component { handleClick (e){ console.log('The event currentTarget is', e.currentTarget); // DOM element setTimeout(() => { console.log('event.currentTarget was', e.currentTarget); // null }, 1000) } render () { return <button onClick={this.handleClick}>Fire event!</button> } }
当您单击按钮时,这将记录一个DOM元素,然后再记录null一秒。由于我以外的原因,event.target它会一直存储到下一个事件发生为止,并且不会无效。
event.target