React表单onSubmit事件对象在DevTools中显示[[Target]]的问题咨询

嘿，我来帮你搞明白这个问题～首先得提一句，你这里把表单提交事件的参数命名为values有点容易混淆，通常我们会叫它event（毕竟它是一个事件对象，不是表单值），不过先回到你的核心疑问：

什么是[[Target]]？ #

[[Target]]是Chrome DevTools用来显示被JavaScript代理包装的原生对象的标记。React为了实现跨浏览器的事件一致性，会把原生DOM事件包装成自己的「合成事件（SyntheticEvent）」对象，这个合成事件本质上是一个代理，它会把真实的原生DOM元素（也就是你的<form>）藏在[[Target]]这个内部槽位里。这是JS引擎的内部属性，不能直接通过代码访问，但DevTools会把它展示出来，方便我们查看真实的底层对象。

怎么在DevTools里找到target[0].value？ #

你可以按这个步骤来操作：

• 当你在控制台打印values（也就是合成事件对象）后，先点击展开它，找到标有[[Target]]的那一项，点击展开就能看到真实的原生<form>元素。
• 展开这个form元素后，找到elements属性（这是一个包含所有表单控件的类数组），点击索引为0的输入框元素，再展开它就能看到value属性，里面就是你要的输入值。
• 更快捷的方式：你可以直接在控制台输入values.target[0].value，回车后就能直接看到对应的值；或者把真实的form存成临时变量，比如输入const form = values.target，再展开form去查看elements[0].value。

另外补充个小建议：React的合成事件里，你可以直接用values.target.elements来更清晰地访问表单控件，比如values.target.elements.username.value（如果给输入框加了name="username"的话），这样比用索引更易读也更可靠～

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