React中通过onChange更新状态数组多输入值并提交展示的实现

在React里确实应该用受控组件的方式处理输入，完全不需要原生DOM查询。下面直接给你可运行的实现方案：

核心思路 #

把每个输入框的值和state数组的对应元素绑定，通过onChange事件精准更新数组中对应位置的值，提交时直接从state里取值即可。

完整代码示例 #

import { useState } from 'react';

function MultiInputForm() {
  // 初始化state数组，假设我们有3个输入框，初始值为空字符串
  const [inputValues, setInputValues] = useState(['', '', '']);

  // 通用的输入变更处理函数
  const handleInputChange = (index, e) => {
    // 复制原数组，避免直接修改state（React要求state不可变）
    const newValues = [...inputValues];
    // 更新对应索引的输入值
    newValues[index] = e.target.value;
    // 设置新的state
    setInputValues(newValues);
  };

  // 表单提交处理
  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里可以直接使用state里的inputValues，比如打印或者提交到后端
    console.log('输入值:', inputValues);
    // 也可以做展示逻辑，比如弹窗或者渲染到页面上
    alert(`输入值：${inputValues.join(', ')}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 遍历state数组渲染输入框 */}
      {inputValues.map((value, index) => (
        <div key={index}>
          <label>输入框 {index + 1}：</label>
          <input
            type="text"
            value={value}
            onChange={(e) => handleInputChange(index, e)}
          />
        </div>
      ))}
      <button type="submit">提交</button>
    </form>
  );
}

export default MultiInputForm;

关键细节说明 #

• 不可变更新state：必须复制原数组再修改，不能直接inputValues[index] = ...，因为React依赖state的引用变化来触发重渲染。
• 通用处理函数：通过传入索引，一个函数就能处理所有输入框的变更，不用给每个输入写单独的处理函数，简洁高效。
• 受控组件：每个输入框的value绑定到state，onChange触发state更新，这样输入框的值始终和state保持同步，完全由React掌控。

如果你的输入框数量是动态的（比如可以添加/删除输入框），只需要修改state数组的增删逻辑即可，比如添加按钮触发setInputValues([...inputValues, ''])，删除按钮触发过滤掉对应索引的数组。

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