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

Posted

技术标签:

【中文标题】动态表单 - 如何使用反应钩子更新“onChange”事件中多个表单字段的值?【英文标题】:Dynamic Forms - How to update the value of multiple form fields on 'onChange' event using react hooks? 【发布时间】: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: ''); 【参考方案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,以便我们可以使用相同的更改处理程序处理多个字段。

【讨论】:

以上是关于动态表单 - 如何使用反应钩子更新“onChange”事件中多个表单字段的值?的主要内容,如果未能解决你的问题,请参考以下文章

反应表单钩子如何验证选择选项

如何将输入值从子表单组件传递到其父组件的状态以使用反应钩子提交?

如何使用反应钩子 react.js 一次更新多个状态

对两者使用相同的表单组件,添加和更新。反应式

如何正确更新反应钩子状态中的数组

在表单控制输入中反应 js useReducer 钩子