如何从数组中的Test组件获取用户输入的数据？

1. 定义父组件的初始状态 #

把exercises设计为包含每个练习表单数据的数组，每个项携带唯一ID（用于区分不同练习）和表单字段：

import { useState } from 'react';

function ParentComponent() {
  // 初始化练习数组，每个项带唯一ID和空表单字段
  const [exercises, setExercises] = useState([]);

  // 添加新练习：生成唯一ID，初始化空字段
  const addExercise = () => {
    setExercises(prev => [...prev, {
      id: Date.now(), // 用时间戳作为临时唯一标识
      name: '',
      sets: '',
      weight: '',
      reps: ''
    }]);
  };

  // 后续逻辑...
}

2. 改造Test组件为受控组件 #

让Test组件接收当前练习的数据和更新回调，输入变化时立即通知父组件更新对应项：

function Test({ exercise, onUpdate }) {
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    // 将更新的字段和对应ID传给父组件
    onUpdate(exercise.id, { [name]: value });
  };

  return (
    <div className="exercise-form">
      <input
        type="text"
        name="name"
        value={exercise.name}
        onChange={handleInputChange}
        placeholder="练习名称"
      />
      <input
        type="number"
        name="sets"
        value={exercise.sets}
        onChange={handleInputChange}
        placeholder="组数"
      />
      <input
        type="number"
        name="weight"
        value={exercise.weight}
        onChange={handleInputChange}
        placeholder="重量"
      />
      <input
        type="number"
        name="reps"
        value={exercise.reps}
        onChange={handleInputChange}
        placeholder="次数"
      />
    </div>
  );
}

3. 父组件实现单个练习的更新逻辑 #

通过ID定位要修改的练习项，采用不可变方式更新状态：

function ParentComponent() {
  // ...之前的状态和addExercise方法

  const updateExercise = (exerciseId, updatedFields) => {
    setExercises(prev => prev.map(item => {
      if (item.id === exerciseId) {
        // 合并原数据与更新字段，返回新对象
        return { ...item, ...updatedFields };
      }
      return item;
    }));
  };

  // 渲染练习列表和添加按钮
  return (
    <div>
      <button onClick={addExercise}>添加练习</button>
      {exercises.map(exercise => (
        <Test
          key={exercise.id}
          exercise={exercise}
          onUpdate={updateExercise}
        />
      ))}
      {/* 可实时查看exercises数组的状态 */}
      <pre>{JSON.stringify(exercises, null, 2)}</pre>
    </div>
  );
}

核心注意点 #

• 唯一ID标识：确保每个练习项有独立标识，避免渲染冲突，同时精准定位更新目标
• 受控组件模式：所有表单输入值由父组件状态控制，输入变化同步更新状态，保证数据一致性
• 不可变状态更新：使用map返回新数组，不直接修改原状态，符合React状态更新规则

完成以上改造后，exercises数组会实时同步每个Test组件的用户输入，可直接用于后续提交、存储等操作。

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