React表单onSubmit中console.log(event)为何看不到preventDefault方法？

嘿，这个问题我刚入门React的时候也踩过坑，太有共鸣了！咱们一步步说清楚：

1. preventDefault来自React的合成事件（SyntheticEvent） #

React并没有直接使用浏览器原生的DOM事件对象，而是自己封装了一层「合成事件」——这是React为了实现跨浏览器兼容、统一事件接口搞出来的东西。

所有你在React组件的表单、点击等事件里拿到的event，都是SyntheticEvent的实例。而preventDefault、stopPropagation这些你常用的方法，都是定义在SyntheticEvent的原型链上的，不是事件对象自身的属性。

2. 为啥console.log(event)看不到它？ #

这是浏览器控制台的默认行为导致的：当你用console.log()打印一个对象时，它只会展示对象自身的可枚举属性，不会主动展开原型链上的内容。

想要看到完整的方法，你可以换用console.dir(event)——这个命令会递归展开对象的所有属性，包括原型链上的方法，你就能在原型里找到preventDefault了。

不过放心，哪怕你打印的时候看不到这个方法，直接调用event.preventDefault()是完全有效的，它会正常阻止表单默认提交（或者其他原生行为）。

额外补充：React的事件池化 #

顺带提一句，React会对合成事件进行「池化」处理——事件处理函数执行完后，React会重置这个事件对象的属性，方便复用。但这只会影响对象自身的属性，原型链上的preventDefault这些方法不会被清空，所以不用担心调用失效的问题。

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