如何解决Reactjs-使用对象将表单数据存储为状态变量
以前,我遵循的系统中,我将每个输入保存在一个Form中作为React状态变量,并具有用于更新它们的通用函数。
现在,我试图将所有Form数据存储在一个对象中,并将其存储为React状态变量(如下所示)。
const [formInputs,setFormInputs] = React.useState({});
const onInputChange = (event) => {
formInputs[event.target.name] = event.target.value;
setFormInputs(formInputs);
console.log("onInputChange => formInputs",formInputs);
};
输入元素的用法如下:
<input
type="text"
name="username"
placeholder="username"
value={formInputs.username || ""}
onChange={onInputChange}
/>
在这里,即使输入数据后,输入元素也始终保持空白。在这种情况下,似乎总是要考虑空字符串""
而不是formInputs.username
:value={formInputs.username || ""}
通过注释此行,它似乎正在工作。但是,我认为这不是正确的方法。请在这里建议我错过的事情...
Code-Sandbox(请检查Console
标签中的日志!)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。