React合成实事件中，事件参数 event 属性值为 null

本篇文章参考以下博文

• 解决react项目中event对象打印的值为null

前言

  最近在做一个右键功能的时候，界面使用到事件参数 event.button ，取值的时候先用 console 打印了一下，结果打印结果每一项都是 null ，但是确实又取到具体数值。感觉很有意思，在这里记录一下，当做一个冷知识。

解决方法

  先说一下解决方法，可以在 console.log() 前面添加 event.persist() 或者 e.persist() 。

原理

  解释一下原理，主要是 React 的 on 开头的事件都是合成事件，不是真实的，在原生的 DOM 上进行了封装，封装好之后交给事件池进行管理，合成事件对象可能会被重用，合成事件的所有属性也会随之被清空。所以当在异步处理程序（如 setTimeout 等等）中或者浏览器控制台中去访问合成事件的属性，默认 react 会把其属性全部设为 null 。

  如果在 react 中想异步访问事件属性（如在 setTimeout 内），应该在是处理事件时调用 event.persist() ，这会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。

  如果想了解 React 中原生事件和合成事件的区别，请跳转下面博文。

• React原生事件才是亲儿子，合成事件哭晕在厕所