Question

以前，我遵循的系统中，我将每个输入保存在一个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标签中的日志！）

Reactjs-使用对象将表单数据存储为状态变量

0 个答案: