React：利用计算属性名特点更新表单值

需求：三个input框，在input框输入时候，获取最新值，进行数据更新

思路：name属性的变量设置的和表单的变量一样，方便通过name属性更新值

function TenantManage() {const [formData, setFormData] = useState<formDataType>({ companyName: '', contact: '',   phone: '' })/*** 修改input框的回调*/
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {const { name, value } = e.target//setState的函数写法setFormData((prevState) => ({...prevState,[name]: value,}))
}return (<Input name='companyName' value={formData.companyName} onChange={handleChange} /><Input name='contact' value={formData.contact} onChange={handleChange} /><Input name='phone' value={formData.phone} onChange={handleChange} />)}

[name]: value 使用了 ES6 的计算属性名特性

// ES6 计算属性名语法
const dynamicKey = 'age';
const person = {name: 'John',[dynamicKey]: 30 // 等价于 age: 30
};

总结：将变量的值变成属性名，得加上[ ] ，不加的话就是更新name属性的值，但是我们想更新的是companyName、contact、phone这些属性的值