React组件中handleClick打印空事件对象的原因咨询

当你把handleClick绑定到<button>的onClick事件时，React会自动将合成事件（SyntheticEvent）对象作为第一个参数传入回调函数。你代码里的abc参数，本质就是这个合成事件对象，所以控制台打印的是该对象的属性集合。

至于所有属性都是null的原因，是因为React采用了事件池机制：事件回调执行完成后，React会回收这个合成事件对象，将其所有属性重置为null，以便后续复用。如果想查看事件对象的真实属性值，需要在打印前调用abc.persist()，阻止React回收该事件：

handleClick = (abc) => {
  abc.persist(); // 阻止事件被回收复用
  this.props.clickHandler(this.props.name);
  console.log(abc);
};

简单总结：

• 你打印的abc是React自动传入的合成事件对象
• 属性为null是事件池回收复用机制导致的
• 调用persist()可保留事件对象的真实属性

内容的提问来源于stack exchange，提问作者senix