动态表单 - 如何使用反应钩子更新“onChange”事件中多个表单字段的值？答案

【问题标题】：Dynamic Forms - How to update the value of multiple form fields on 'onChange' event using react hooks?动态表单 - 如何使用反应钩子更新“onChange”事件中多个表单字段的值？
【发布时间】：2021-10-12 08:39:01
【问题描述】：

使用基于类的组件，我们对多个输入字段这样做

handleChange(evt) {
   this.setState({
     [evt.target.name]: evt.target.value;
});

但我想用钩子来做：

const [newName, setNewColorName] = useState('');
const [newPaletteName, setNewPaletteName] = useState('');

function handleChange(evt) {
    //For 'newColorName'
    setNewColorName(evt.target.value);
}

我知道如何为每个单独的字段执行此操作，但我想像在基于类的组件中那样编写通用代码，这样我就不必为每个字段重复。

【问题讨论】：

将所有字段放在一个 useState 挂钩中怎么样？然后像在类基础组件状态上那样做吗？
我的意思是这样的： const [fields, setFields] = useState({newColorName: '', newPaltetteName: ''});

标签： reactjs react-hooks react-functional-component react-forms react-class-based-component

【解决方案1】：

这与我们使用基于类的组件的方式相同，假设我们想使用钩子定义一个登录表单


const [formData, setFormData] = useState({
  email: "",
  password: "",
});
 
onChange = e => {
 setFormData({ ...formData, [e.target.id]: e.target.value});
}

// 
<form onSubmit={handleSubmit}>
   <input id="email" value={formData.email} onChange={handleChange} />
   <input id="password" value={formData.password} onChange={handleChange} />
   <button type="submit" />
</form>

我们的逻辑是我们在输入字段中获取与 formData 中使用的键对应的属性，如 name 或 id，以便我们可以使用相同的更改处理程序处理多个字段。

【讨论】：