reactjs - 在 ReactJS 中管理大量表单输入字段的专业方法是什么？

Question

我的 React 应用程序在表单标签上有 20 多个字段。和我的工作代码如下

function DriverForm() {
    const [formData1, setFormData1] = useState(1);
    const [formData2, setFormData2] = useState(2);
    const [formData3, setFormData3] = useState(3);
    const [formData4, setFormData4] = useState(4);
    const [formData5, setFormData5] = useState(5);

    const handleSubmit = (event) => {
        event.preventDefault();
    };

    return (
        <div className="wrapper">
            <form onSubmit={handleSubmit}>
                <input value={formData1} onChange={(e) => setFormData1(e.target.value)} />
                <input value={formData2} onChange={(e) => setFormData2(e.target.value)} />
                <input value={formData3} onChange={(e) => setFormData3(e.target.value)} />
                <input value={formData4} onChange={(e) => setFormData4(e.target.value)} />
                <input value={formData5} onChange={(e) => setFormData5(e.target.value)} />
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

如您所见，我的代码重复声明输入字段状态变量，如 const [formData5, setFormData5] = useState(5);在渲染函数中，onChange={(e) => setFormData1(e.target.value)} 重复了很多次。

有什么方法可以使用json对象等，既简单又专业？

Answer 1

我想您可以通过合并重复的位来使代码更干。

1. 通过输入名称保存字段值的单一状态对象
2. 单个更改处理程序来处理状态更新中的合并
3. 为输入分配一个 name 属性以随更改事件一起传递

干溶液

function DriverForm() {
  const [formData, setFormData] = useState({
    data1: 1,
    data2: 2,
    // etc...
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    // handle formData
  };

  const handleChange = event => {
    event.preventDefault();
    const { name, value } = event.target;
    setFormData(formData => ({
      ...formData,
      [name]: value,
    }))
  }

  return (
    <div className="wrapper">
      <form onSubmit={handleSubmit}>
        <input value={formData.data1} name="data1" onChange={handleChange} />
        <input value={formData.data2} name="data2" onChange={handleChange} />        
        // etc..
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

如果您提前知道输入类型是什么，您可以将它们加载到配置数组中并映射它们

const fieldData = [
  {
    name: 'data1',
    type: 'text',
  },
  // etc...
];

...

<form onSubmit={handleSubmit}>
  {fieldData.map(({ name, type }) => (
    <input
      key={name{
      type={type}
      value={formData[name]}
      name={name}
      onChange={handleChange}
    />
  ))}
  <button type="submit">Submit</button>
</form>