React useRef疑问：多字段表单必须创建多个useRef实例吗？

不需要创建大量useRef实例，业内处理这类多字段表单的通用方案是使用受控组件（结合useState），而非逐个创建useRef。以下是具体实现思路和示例：

为什么不推荐大量使用useRef？ #

useRef的核心用途是访问DOM元素或存储不需要触发重渲染的值，并不适合用来管理表单输入的状态。逐个创建useRef会导致代码冗余，且无法便捷地同步表单状态与UI，后续的验证、格式化等操作也会变得繁琐。

受控组件实现方案 #

用一个useState维护整个表单的状态对象，动态遍历生成输入框，通过通用的onChange函数更新状态，提交时直接使用状态对象即可。

代码示例 #

假设你导入的初始表单数据为：

const initialFormData = {
  key1: 100,
  key2: 200,
  // ... 其余50-200个数字字段
};

组件实现：

import { useState } from 'react';

const LargeNumberForm = () => {
  // 用useState维护整个表单状态
  const [formData, setFormData] = useState(initialFormData);

  // 通用输入变更处理函数
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    // 确保输入转为数字类型
    setFormData(prevState => ({
      ...prevState,
      [name]: Number(value) || 0 // 空值时设为0，可根据需求调整
    }));
  };

  // 提交处理
  const handleSubmit = (e) => {
    e.preventDefault();
    // 此处执行提交逻辑，比如发送请求到后端
    console.log('提交的表单数据:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 遍历状态对象，动态生成所有输入框 */}
      {Object.entries(formData).map(([fieldKey, fieldValue]) => (
        <div key={fieldKey} style={{ marginBottom: '8px' }}>
          <label htmlFor={fieldKey}>{fieldKey}:</label>
          <input
            type="number" // 数字类型输入，使用number类型更合适
            id={fieldKey}
            name={fieldKey}
            value={fieldValue}
            onChange={handleInputChange}
            style={{ marginLeft: '8px' }}
          />
        </div>
      ))}
      <button type="submit">一键提交所有数据</button>
    </form>
  );
};

export default LargeNumberForm;

方案优势 #

• 代码简洁：无需为每个输入框单独声明useRef，仅用一个状态对象管理所有字段。
• 状态同步：UI与状态实时同步，便于实现输入验证、格式转换等需求。
• 扩展性强：新增或删除字段时，只需修改初始数据对象，无需调整组件逻辑。

非受控组件备选方案（若偏好使用ref） #

如果确实需要用ref获取DOM值，也无需创建大量useRef实例，可以用一个useRef对象存储所有输入框的引用：

import { useRef } from 'react';

const LargeNumberForm = () => {
  const inputRefs = useRef({});
  const initialFormData = { key1: 100, key2: 200 /* ... */ };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 遍历ref对象收集所有输入值
    const submitData = {};
    Object.keys(initialFormData).forEach(key => {
      submitData[key] = Number(inputRefs.current[key]?.value) || 0;
    });
    console.log('提交的数据:', submitData);
  };

  return (
    <form onSubmit={handleSubmit}>
      {Object.entries(initialFormData).map(([key, value]) => (
        <div key={key}>
          <label>{key}:</label>
          <input
            type="number"
            defaultValue={value}
            ref={el => inputRefs.current[key] = el}
          />
        </div>
      ))}
      <button type="submit">提交</button>
    </form>
  );
};

这种方式属于非受控组件，适合不需要实时同步状态的场景，但相比受控组件，缺少状态联动的便捷性。

总结：处理多字段表单时，受控组件是业内通用且更优的方案，无需创建大量useRef实例。

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