React中不绑定State或使用Ref，如何获取动态输入框的值？

针对你这种从后端动态获取输入配置、无法提前绑定固定state或ref的场景，有几种实用的解决方法：

方法1：表单包裹 + FormData收集（最推荐） #

把所有动态输入框放在<form>里，利用表单原生能力收集所有输入值，无需额外维护状态，代码简洁高效。

修改后的代码：

const [inputs, loading] = useFetch(url);

const handleSubmit = (e) => {
  e.preventDefault();
  // 用FormData一次性收集所有输入
  const formData = new FormData(e.target);
  // 转换为普通对象方便后续处理
  const inputValues = Object.fromEntries(formData.entries());
  console.log('所有输入值:', inputValues);
  // 这里可执行提交逻辑
};

if (loading) return <div>加载中...</div>;

return (
  <form onSubmit={handleSubmit}>
    {inputs.map((input) => (
      <div key={input.key} className="row">
        <label>{input.label}</label>
        {/* 核心：给每个input设置name属性，值为input的key，FormData会以此为键收集值 */}
        <input
          type="text"
          name={input.key}
          placeholder={input.label}
          maxLength={input.maxLength}
          required={input.required}
        />
      </div>
    ))}
    <button type="submit">提交</button>
  </form>
);

方法2：统一维护state对象 #

用对象类型的state，根据动态输入的key绑定对应的值，适合需要实时获取输入状态的场景（比如实时校验）。

代码示例：

const [inputs, loading] = useFetch(url);
// 初始化状态为空对象，后续根据输入key动态添加属性
const [inputValues, setInputValues] = useState({});

const handleInputChange = (e) => {
  const { name, value } = e.target;
  // 扩展原有状态，更新当前输入项的值
  setInputValues(prev => ({
    ...prev,
    [name]: value
  }));
};

if (loading) return <div>加载中...</div>;

return (
  <>
    {inputs.map((input) => (
      <div key={input.key} className="row">
        <label>{input.label}</label>
        <input
          type="text"
          name={input.key}
          // 绑定对应key的状态值，为空时显示空字符串
          value={inputValues[input.key] || ''}
          onChange={handleInputChange}
          placeholder={input.label}
          maxLength={input.maxLength}
          required={input.required}
        />
      </div>
    ))}
    <button onClick={() => console.log('实时输入值:', inputValues)}>查看当前值</button>
  </>
);

方法3：用useRef存储输入框引用 #

如果需要直接操作输入框DOM（比如手动聚焦、获取DOM属性），可以用useRef创建集合存储每个输入框的引用。

代码示例：

const [inputs, loading] = useFetch(url);
// 用Map存储输入key和对应的DOM引用
const inputRefs = useRef(new Map());

const getInputValues = () => {
  const values = {};
  // 遍历Map收集所有输入值
  inputRefs.current.forEach((ref, key) => {
    values[key] = ref.value;
  });
  console.log('输入值:', values);
};

if (loading) return <div>加载中...</div>;

return (
  <>
    {inputs.map((input) => (
      <div key={input.key} className="row">
        <label>{input.label}</label>
        <input
          type="text"
          // 挂载时把DOM元素存入Map，卸载时移除
          ref={(el) => {
            el ? inputRefs.current.set(input.key, el) : inputRefs.current.delete(input.key);
          }}
          placeholder={input.label}
          maxLength={input.maxLength}
          required={input.required}
        />
      </div>
    ))}
    <button onClick={getInputValues}>获取输入值</button>
  </>
);

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