reactjs - 动态表单 - 如何使用反应钩子更新“onChange”事件中多个表单字段的值?
问题描述
使用基于类的组件,我们对多个输入字段这样做
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);
}
我知道如何为每个单独的字段执行此操作,但我想像在基于类的组件中那样编写通用代码,这样我就不必为每个字段重复。
解决方案
这与我们使用基于类的组件的方式相同,假设我们要使用钩子定义登录表单
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 中使用的键对应的名称或 id 等属性,以便我们可以使用相同的更改处理程序处理多个字段。