如何解决在表单元素中处理许多输入字段的最佳实践是什么?反应
假设我们有一个react组件,该组件具有一个form元素,其中有许多不同类型的输入字段。我们还假设我们有一个按钮,当单击该按钮时,会将表单的每个输入字段发送给某个函数。
在这种情况下,在每个输入字段中都有一个onChange并为每个输入字段具有一个不同的句柄更改功能是否被视为一种好习惯?这样,应在单击按钮之前更新所有内容。但是,如果您有任意数量的大量输入字段(例如100),这种方法似乎并不可行。我不想为此组件编写100多个不同的句柄更改函数。有其他选择吗?
解决方法
您可以为每个输入指定唯一的名称(或ID),之后您可以在组件中具有本地状态,并且只能使用一个onChange
方法。因此,您的想法是执行以下操作:
对于本地状态,您有:
const [state,setState] = useState({});
对于onChange,您有:
const onChange = (e) => {
setState({ ...state,[e.target.name]: e.target.value });
};
正如您在onChange
方法中看到的那样,我输入了输入的名称并为其分配了该输入的值。这就是为什么我说每个输入的名称都应该唯一。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。