为何在React表单元素中需将e.target.name置于方括号[]中？

嘿，这个问题问得特别到位！我来给你拆解清楚其中的门道～

在你的代码里，this.setState({ [e.target.name]: e.target.value }) 里的方括号可不是随便加的，这是JavaScript的计算属性名语法，核心作用就是让你能动态设置对象的键名。

先搞懂两种对象键的写法 #

JavaScript里定义对象有两种方式：

1. 固定键名：直接写死键名，比如 { title: '我的标题' }，这里的title就是固定的键。
2. 计算键名：用方括号包裹表达式，表达式的结果会作为键名，也就是你代码里的[e.target.name]。

为啥不能直接写e.target.name？ #

如果去掉方括号，写成 this.setState({ e.target.name: e.target.value })，JavaScript会把e.target.name当成一个字面量字符串来作为键名，最终生成的对象会是这样：

{ "e.target.name": "你输入的内容" }

这显然不是你想要的——你希望更新的是state里的title属性，而不是一个叫"e.target.name"的奇怪属性对吧？

加了方括号会发生啥？ #

当你用[e.target.name]时，JavaScript会先执行方括号里的表达式：拿到输入框的name属性值（也就是你的例子里的'title'），然后把这个值作为对象的键。最终生成的对象就是：

{ title: "你输入的内容" }

这样setState就能精准更新state中对应name的属性啦！

额外的好处：复用onChange函数 #

这种写法最大的优势在于复用性——如果你有多个表单字段，比如name="content"的文本框、name="author"的输入框，不用为每个字段写单独的onChange函数，同一个函数就能自动处理所有字段的更新，简直不要太方便！

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