React中handleChange函数疑问：...data与[e.target.name]作用解析

首先提个小修正：你的代码里const [data , setData] = ({firstname:'' , lastname:'' , password:''});写法有误，应该用React的useState钩子，正确写法是：

const [data , setData] = useState({firstname:'' , lastname:'' , password:''});

1. 扩展运算符...data的作用 #

React要求状态更新必须是不可变操作——不能直接修改原有的data对象，必须返回全新对象替换旧状态。

• ...data会把原data里的所有键值对（比如firstname: ''、lastname: ''）完整复制到新对象中
• 这样能保留未修改字段的原有值，只更新当前输入对应的字段。如果不用...data，直接写setData({[e.target.name]: e.target.value})，新对象就只剩当前修改的字段，其他字段会丢失，表单里其他输入框的内容会直接清空。

2. [e.target.name]中方括号的作用 #

这是JavaScript的计算属性名语法：

• 方括号里的e.target.name是变量，它的实际值会作为新对象的属性名。比如当前输入框的name属性是"firstname"，那[e.target.name]就等价于"firstname"，新对象里会生成firstname: e.target.value这个键值对
• 借助这个语法，一个handleChange函数就能处理所有和data字段名对应的输入框，不用给每个输入框单独写 onChange 处理函数，大幅提升代码复用性。

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