如何获取循环生成的同组件多输入框的值？

要实现收集循环生成的多个输入框的值并组成数组，核心是把状态提升到父组件，由父组件统一管理所有输入框的值，子组件仅负责触发更新事件。具体修改如下：

修改后的父组件（Home） #

import { useState } from 'react';

function Home(){
  const [multipleQuestions, setMultipleQuestions] = useState([0, 1, 2]);
  // 初始化输入值数组，长度与输入框数量一致，默认填充空字符串
  const [inputValues, setInputValues] = useState(Array(multipleQuestions.length).fill(''));

  // 根据输入框索引更新对应位置的值
  const handleInputChange = (index, value) => {
    const updatedValues = [...inputValues];
    updatedValues[index] = value;
    setInputValues(updatedValues);
  };

  return(
    <div>
      {multipleQuestions.map((data, index) => (
        <div key={data}>
          <MultipleInputs 
            index={index} 
            onChange={handleInputChange} 
            value={inputValues[index]} // 受控组件，保证输入框值与状态同步
          />
        </div>
      ))}
      {/* 实时查看收集到的输入值数组 */}
      <p>当前输入值数组：{JSON.stringify(inputValues)}</p>
    </div>
  )
}

修改后的子组件（MultipleInputs） #

function MultipleInputs({ index, onChange, value }) {
  const handleChange = (e) => {
    // 将当前输入框的索引和值传递给父组件
    onChange(index, e.target.value);
  };

  return <input onChange={handleChange} value={value} />;
}

核心逻辑说明 #

• 父组件维护inputValues状态数组，每个元素对应一个输入框的值，数组长度与生成的输入框数量保持一致。
• 给每个子组件传递index（标记输入框的位置）和onChange回调，子组件输入变化时通知父组件更新对应位置的值。
• 将子组件设为受控组件，通过value属性绑定父组件状态，确保输入框的值始终与状态同步，避免数据不一致问题。
• 最终inputValues数组就是按顺序排列的所有输入框的值，可直接用于后续逻辑处理。

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