React父子组件通信：如何将子组件输入值存入父组件状态数组

核心思路是把所有输入框的状态统一放在父组件管理，子组件只负责渲染输入框并将用户输入同步给父组件，具体实现步骤如下：

1. 父组件实现 #

父组件维护一个与子组件数量对应的数组状态，同时提供回调函数给子组件，用于更新对应位置的输入值：

import { useState } from 'react';
import Child from './Child';

function Parent() {
  // 初始化长度为4的数组，默认值可根据需求设为空字符串或0
  const [amounts, setAmounts] = useState(new Array(4).fill(''));

  // 接收子组件的索引和新值，更新对应位置的状态
  const handleAmountChange = (index, newValue) => {
    // 注意：不能直接修改原数组，要创建新数组保证状态不可变性
    const updatedAmounts = [...amounts];
    updatedAmounts[index] = newValue;
    setAmounts(updatedAmounts);
  };

  return (
    <div>
      {/* 遍历数组，给每个子组件传索引、当前值和回调函数 */}
      {amounts.map((amount, index) => (
        <Child
          key={index}
          index={index}
          value={amount}
          onAmountChange={handleAmountChange}
        />
      ))}
      {/* 可在这里测试输出，确认所有值被正确收集 */}
      <p>所有输入值：{JSON.stringify(amounts)}</p>
    </div>
  );
}

export default Parent;

2. 子组件实现 #

子组件仅需接收父组件传递的value和onAmountChange，绑定到输入框即可：

function Child({ index, value, onAmountChange }) {
  const handleInputChange = (e) => {
    // 将当前索引和输入框新值传给父组件的回调
    onAmountChange(index, e.target.value);
  };

  return (
    <div>
      <label>Amount:</label>
      <input
        type="number"
        value={value}
        onChange={handleInputChange}
      />
    </div>
  );
}

export default Child;

关键要点说明 #

• 状态不可变性：更新数组时必须创建新数组（比如用扩展运算符[...amounts]），不能直接修改原数组，否则React无法检测状态变化，不会触发重新渲染。
• 索引绑定：给每个子组件传递唯一索引，父组件可准确更新数组对应位置，避免之前用Context时覆盖值的问题（之前的Context方案大概率只存了单个值而非数组，导致每次更新都会替换原有内容）。
• props传递优势：这种父子组件直接通过props传递状态和回调的方式，比Context更适合层级明确、子组件由父组件直接渲染的场景，逻辑更清晰，调试也更简单。

当需要调用函数使用该数组时，直接从父组件的amounts状态中获取即可，比如：

const handleSubmit = () => {
  // 这里可使用amounts数组作为参数调用接口或其他函数
  console.log('提交的所有Amount值：', amounts);
};

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