如何在单个useState变量中存储多个表单输入字段的值？

我创建了一个包含多个输入字段的表单，希望将这些输入字段的数据存储到单个useState变量中。尝试后未能成功，请问该如何实现？

你的代码里有几个关键问题导致无法正确存储数据：

1. 错误的state更新方式：输入框的onChange事件中直接用setData(e.target.value)，会把整个data对象替换成当前输入的字符串，破坏原有对象结构，后续字段无法正常读取和更新。
2. 拆分的state：单独维护了phoneNumber state，没有和主data合并，导致数据分散。
3. 提交函数逻辑错误：const values = [...data]试图将对象解构为数组，属于语法错误；setData(savedData)逻辑混乱，setData是更新state的函数，不能这样赋值。

修正步骤 #

1. 合并所有字段到单个state：把phoneNumber1、phoneNumber2、phoneNumber3整合到主data对象中，统一管理。
2. 正确更新state：更新时保留原有对象的所有属性，只修改当前输入对应的字段，可通过展开运算符或函数式更新实现。
3. 通用onChange处理函数：利用输入框的name属性匹配state字段，避免重复编写onChange逻辑。
4. 修正提交逻辑：提交时直接使用完整的data对象即可。

完整修正代码 #

import React, { useState } from "react";
const Form = () => {
  // 合并所有字段到单个data state
  const [data, setData] = useState({
    firstName: "",
    lastName: "",
    phoneNumber1: "",
    phoneNumber2: "",
    phoneNumber3: "",
    zipCode: "",
    age: "",
    role: "",
    helping_role: "",
    note: "",
    preferred_pronouns: "",
    email: ""
  });

  const options = [
    // 你的选项数据
  ];

  const roles = [
    // 你的角色数据
  ];
  const helpOptions = [
    // 你的帮助选项数据
  ];

  // 通用的输入变更处理函数
  const handleChange = (e) => {
    const { name, value } = e.target;
    setData(prevData => ({
      ...prevData,
      [name]: value
    }));
  };

  const onClickSendButton = async () => {
    // 直接使用完整的data对象，比如发送到后端
    console.log("提交的数据:", data);
    // 可选：重置表单
    // setData({
    //   firstName: "",
    //   lastName: "",
    //   phoneNumber1: "",
    //   phoneNumber2: "",
    //   phoneNumber3: "",
    //   zipCode: "",
    //   age: "",
    //   role: "",
    //   helping_role: "",
    //   note: "",
    //   preferred_pronouns: "",
    //   email: ""
    // });
  };

  return (
    <>
      {/* <Navbar /> */}
      <div className="form-main-container">
        <div className="form-field">
          <label>Name*</label>
          <br />
          <input
            className="input-field"
            id="firstName-field"
            type="text"
            placeholder="First Name"
            required
            name="firstName"
            value={data.firstName}
            onChange={handleChange}
          />

          <input
            className="input-field"
            id="lastName-field"
            type="text"
            placeholder="Last Name"
            required
            name="lastName"
            value={data.lastName}
            onChange={handleChange}
          />
        </div>
      
        <div className="form-field">
          <label>Phone Number*</label>
          <br />
          {/* 电话号码输入框，name对应state字段 */}
          <input
            className="input-field"
            type="text"
            placeholder="###"
            required
            name="phoneNumber1"
            value={data.phoneNumber1}
            onChange={handleChange}
            maxLength={3}
          />
          <input
            className="input-field"
            type="text"
            placeholder="###"
            required
            name="phoneNumber2"
            value={data.phoneNumber2}
            onChange={handleChange}
            maxLength={3}
          />
          <input
            className="input-field"
            type="text"
            placeholder="####"
            required
            name="phoneNumber3"
            value={data.phoneNumber3}
            onChange={handleChange}
            maxLength={4}
          />
        </div>

        <div className="form-field">
          <label>Zip Code*</label>
          <br />
          <input
            className="input-field"
            type="number"
            placeholder="###"
            required
            name="zipCode"
            value={data.zipCode}
            onChange={handleChange}
          />
        </div>
        <hr />
        {/* 其他表单字段，同样使用name匹配state，onChange绑定handleChange */}
        <button onClick={onClickSendButton}>Send</button>
      </div>
    </>
  );
};
export default Form;

关键说明 #

• 通用handleChange：通过e.target.name获取当前输入框对应的state字段名，用展开运算符...prevData保留原有属性，再更新当前字段，确保state结构不被破坏。
• 合并state：把原本单独的phoneNumber相关字段整合到data中，实现单state管理所有表单数据。
• 提交逻辑：提交时data对象已包含所有输入字段的值，直接使用即可。

内容的提问来源于stack exchange，提问作者Ritika