React报错Warning: This synthetic event is reused for performance reasons. If you‘re seeing this, 解决方法

项目场景：

使用React的NavLink标签作为菜单列表，点击菜单列表按钮，动态更换菜单名称

问题描述

点击菜单NavLink时报错出现如下信息

Warning:
This synthetic event is reused for performance reasons.
If you're seeing this, you're accessing the property `nativeEvent` on a released/nullified synthetic event. 
This is set to null. 
If you must keep the original synthetic event around, use event.persist(). 
See https://fb.me/react-event-pooling for more information.

 例子

// 其他无关紧要部分省略了
<input onChange={event => {
  console.log(event.type)  // change
  setTimeout(() => {
    console.log(event.type)  // null，并会出现以上警告
  })
}} />

原因分析：

我们在​​react​​中操作的DOM事件，获取到的事件对象，其实是react内部帮我们合成的。为了节约性能，会使用对象池，当一个合成事件对象被使用完毕，即同步代码实现完毕后，会再次调用并且将其属性全部设为Null，所以当我们异步访问或者打印时，显示的属性值已经是null值

解决方案：

如果要以异步方式访问事件属性，应该对事件调用 ​​event.persist()​​​，这将从池中删除合成事件，并允许用户代码保留对事件的引用。它会将当前的合成事件对象从​​对象池​​抽离出来，这样就不会再被调用并且其属性不会变为Null.

将 ​​event事件对象传入方法，​​

<div onClick={(event) => this.mouseOut('关注QC班长',event)}>
  <NavLink to="/largeScreen/fireworks/home" activeClassName={styles.activeNav}>
    <SlackOutlined style={{ marginRight: '5px' }} />
    关注QC班长
  </NavLink>
</div>

event.persist()即可

mouseOut = (menuName,event) => {
    this.setState({ visible: 'none' })
    this.setState({ isActive: true })
    if (menuName !== '') {
          event.persist()// 从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。
          this.setState({ activeMenuName: menuName })
    }
  }

参考文献

0、​​合成事件(SyntheticEvent) – React 中文文档 v16.6.3​​

2、​​https://www.jianshu.com/p/bf390141fae8​​