React表单中计算属性[name]为何需方括号？value却无需？

这里的核心是JavaScript对象的属性定义和属性访问的语法差异，和React本身无关，是JS基础语法的问题：

1. [name]的作用：计算属性定义 #

在你更新state的代码里：

return {
    ...prevFormData,
    [name]: type === "checkbox" ? checked : value
}

这里的[name]是ES6的计算属性名语法，它的作用是：把变量name的值作为对象的属性名，而不是把字符串"name"当作属性名。

举个具体例子：当你在邮箱输入框输入时，event.target.name的值是"email"，这时候[name]就等价于写死的email，最终生成的对象会正确覆盖原state里的email字段；如果去掉方括号写成name: ...，那state里会多出一个叫name的字段，原本的email字段根本不会更新，完全不符合表单同步的需求。

2. value={formData.email}：属性访问 #

这里是读取state对象里的email属性，不是定义属性。访问对象属性有两种常用方式：

• 点符号：obj.key，适用于属性名是固定的合法标识符（比如email、password这种）
• 方括号：obj['key']或obj[变量]，适用于属性名是变量、包含特殊字符（比如confirm_password也可以写成formData['confirm_password']）

因为你的state里的email是固定属性名，所以用formData.email这种点符号写法更简洁，效果和formData['email']完全一致。如果属性名是变量（比如const field = 'email'），那就要用formData[field]。

一句话总结 #

• 定义对象属性时，若属性名是变量，必须用[变量名]（计算属性）；若属性名是固定字符串，直接写key: value。
• 访问对象属性时，若属性名是固定字符串，用obj.key或obj['key']；若属性名是变量，用obj[变量名]。

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