Javascript 通过扩展运算符中的变量传递对象属性

我以前在react项目中做过这件事

const[formState，setFormState]=useState（{用户名：''，密码：''，}）；
常量handleInputChange=（e）=>{
如果（例如，target.name==“用户名”）{
setFormState（{…formState，用户名：e.target.value}）
}
如果（例如，target.name==“密码”）{
setFormState（{…formState，密码：e.target.value}）
}
}

您可以像这样使输入名称动态

const handleInputChange=(e)=>{
  const inputName = e.target.name;
  const value = e.target.value;
  setFormState({...formState, [inputName]:value })
};

---

您可以像这样使输入名动态

const handleInputChange=(e)=>{
  const inputName = e.target.name;
  const value = e.target.value;
  setFormState({...formState, [inputName]:value })
};

---

只需将inputName放入[]

const handleInputChange=(e)=>{
    const inputName = e.target.name;
    const value = e.target.value;
    setFormState({...formState, [inputName]:value })
   };

---

只需将inputName放入[]

const handleInputChange=(e)=>{
    const inputName = e.target.name;
    const value = e.target.value;
    setFormState({...formState, [inputName]:value })
   };

---

ES2015允许您使用以下语法在对象上创建计算属性名称：

const a = { [someKeyName]: 'myValue' }

所以你可以写：

const handleInputChange = (e) => {
  setFormState({...formState, [e.target.name]: e.target.value })
};

这里有一个很好的答案：

---

它还注意到，在考虑将在何处使用此语法时要小心。确保您打算支持的浏览器支持它。根据，除非传输，否则它在IE中不可用。

ES2015允许您使用以下语法在对象上创建计算属性名称：

const a = { [someKeyName]: 'myValue' }

所以你可以写：

const handleInputChange = (e) => {
  setFormState({...formState, [e.target.name]: e.target.value })
};

这里有一个很好的答案：

它还注意到，在考虑将在何处使用此语法时要小心。确保您打算支持的浏览器支持它。根据研究，除非传输，否则它在IE中不可用