React中onChange时将子组件输入值传递给父组件的实现方案

核心采用React的状态提升方案，将所有输入框的状态统一维护在顶层的Parent组件中，通过props逐层传递回调函数，让Child2在输入变化时通知Parent更新状态。具体实现步骤如下：

1. 在Parent组件中维护状态并定义回调函数 #

用对象存储所有输入框的值（通过唯一标识绑定每个输入框），同时编写处理输入变化的函数：

const Parent = () => {
  // 用对象存储所有输入框的值，键为每个Child2的唯一标识，值为输入的数字
  const [inputValues, setInputValues] = React.useState({});

  const handleInputChange = (inputKey, value) => {
    // 更新状态，保留原有值的同时更新当前输入框的值
    setInputValues(prev => ({
      ...prev,
      [inputKey]: Number(value) // 转换为数字，匹配input的number类型
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 直接使用inputValues，里面存储了所有Child2输入框的最新值
    console.log('所有输入值:', inputValues);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          {/* 将回调函数和自身name传给Child1 */}
          <Child1 name="child1" onInputChange={handleInputChange} />
          <Child1 name="child2" onInputChange={handleInputChange} />
        </div>
        <button>Submit</button>
      </form>
    </div>
  );
};

2. 修改Child1组件，传递回调与组合标识给Child2 #

Child1接收Parent传来的回调和自身name，为每个Child2生成唯一标识后传递下去：

const Child1 = ({ name: parentName, onInputChange }) => {
  return (
    <div>
      {/* 组合Child1和Child2的name，生成唯一的inputKey */}
      <Child2 
        name="childchild1" 
        inputKey={`${parentName}-childchild1`} 
        onInputChange={onInputChange} 
      />
      <Child2 
        name="childchild2" 
        inputKey={`${parentName}-childchild2`} 
        onInputChange={onInputChange} 
      />
      <Child2 
        name="childchild3" 
        inputKey={`${parentName}-childchild3`} 
        onInputChange={onInputChange} 
      />
    </div>
  );
};

3. 修改Child2组件，绑定onChange事件触发回调 #

Child2接收唯一标识和回调函数，在输入变化时调用回调通知Parent更新状态：

const Child2 = ({ inputKey, onInputChange }) => {
  return (
    <div>
      <input 
        type="number" 
        onChange={(e) => onInputChange(inputKey, e.target.value)}
        {/* 可选：如需回显值，可从Parent传递inputValues并绑定对应值 */}
        {/* value={inputValues[inputKey] || ''} */}
      />
    </div>
  );
};

补充说明 #

• 用inputKey唯一标识每个输入框，避免多个输入框状态冲突，比如child1-childchild1代表第一个Child1下的第一个Child2输入框。
• 如果需要输入框回显当前值，可将Parent的inputValues也逐层传递给Child2并绑定到input的value属性上。
• 提交表单时，inputValues已存储所有Child2输入框的最新值，直接取用即可。

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