将多个输入值设置为 useState 对象的属性答案

【问题标题】：Set multiple input values as properties of a useState object将多个输入值设置为 useState 对象的属性
【发布时间】：2022-11-10 00:12:34
【问题描述】：

我有一个表格要求用户提供不同的输入。我想将用户输入存储在 useState 对象中。

我怎样才能以优化的方式做到这一点？也就是说，无需为每个输入创建不同的handleChange 函数。

  const [user, setUser] = useState({
    username: "",
    email: "",
    password: "",
  });

  <form>
    <input type="text" placeholder="Enter username" />
    <input type="text" placeholder="Enter email" />
    <input type="text" placeholder="Enter password" />
  </form>

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

使用输入标签中的name 属性来指定不同的输入。

  <form>
    <input type="text" name="username" ... />
    <input type="text" name="email" ... />
    <input type="text" name="password" ... />
  </form>

然后，从e.target 获取事件的名称和值以概括更改。

const handleChange = (e) => {
  const { name, value } = e.target; // <--

  setUser((prevUser) => ({
    ...prevUser,
    [name]: value,
  }));

  console.log(user);
};

【讨论】：