React中如何从子组件获取组件值？

核心思路 #

把表单的状态统一提升到父组件AddPOForm中管理，子组件通过props接收回调函数，当用户选择选项时，子组件调用回调把选中的值传递给父组件，这样父组件就能收集所有下拉框的值，用于后续提交操作。

步骤1：修改父组件，统一管理状态和回调 #

在父组件中定义所有下拉框的状态，并为每个子组件传递对应的onChange回调和当前选中值（实现受控组件）：

import "bootswatch/dist/sandstone/bootstrap.css";
import { useState } from "react";
import SelectGrowers from "./Components/SelectGrowers";
import SelectStacks from "./Components/SelectStacks";
import SelectCustomers from "./Components/SelectCustomers";
import SelectCarriers from "./Components/SelectCarriers";

function AddPOForm() {
  // 定义所有下拉框的状态，初始值设为空字符串
  const [selectedGrower, setSelectedGrower] = useState("");
  const [selectedStack, setSelectedStack] = useState("");
  const [selectedCustomer, setSelectedCustomer] = useState("");
  const [selectedCarrier, setSelectedCarrier] = useState("");

  // 表单提交处理函数，收集所有选中的值
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault(); // 阻止默认表单跳转行为
    // 整理提交数据，可直接用于API请求
    const formData = {
      grower: selectedGrower,
      stack: selectedStack,
      customer: selectedCustomer,
      carrier: selectedCarrier,
    };
    console.log("提交的表单数据：", formData);
    // 这里添加提交到后端的逻辑，比如fetch/axios请求
  };

  return (
    <>
      <form className="form-group" onSubmit={handleSubmit}>
        <div className="container">
          <div className="row">
            <div id="growers" className="col-sm-4">
              {/* 传递选中值和回调给子组件 */}
              <SelectGrowers 
                selectedValue={selectedGrower} 
                onValueChange={setSelectedGrower} 
              />
            </div>
            <div className="col-sm-4">
              <SelectStacks 
                selectedValue={selectedStack} 
                onValueChange={setSelectedStack} 
              />
            </div>
          </div>

          <div className="row">
            <div className="col-sm-4">
              <SelectCustomers 
                selectedValue={selectedCustomer} 
                onValueChange={setSelectedCustomer} 
              />
            </div>
            <div className="col-sm-4">
              <SelectCarriers 
                selectedValue={selectedCarrier} 
                onValueChange={setSelectedCarrier} 
              />
            </div>
          </div>
        </div>
        <input type="Submit" className="mt-3" />
      </form>
    </>
  );
}

export default AddPOForm;

步骤2：修改子组件，成为受控组件并传递选中值 #

以SelectGrowers为例，修改子组件：

1. 移除子组件内部的独立状态，改用父组件传递的selectedValue作为select的value属性
2. 正确处理onChange事件，获取选中的选项值并调用父组件传递的回调
3. 修复之前的事件绑定错误（原代码没有执行回调函数也未传参）

import React from "react";

// 定义子组件的Props类型，明确需要接收的参数
interface Props {
  selectedValue: string;
  onValueChange: (value: string) => void;
}

export default function SelectGrowers({ selectedValue, onValueChange }: Props) {
  const growers = [
    { id: 1, value: "Grower A" },
    { id: 2, value: "Grower B" },
    { id: 3, value: "Grower C" },
  ];

  // 处理下拉框变化，把选中值传给父组件
  const handleGrowerChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onValueChange(e.target.value);
  };

  return (
    <div className="form-group">
      <label htmlFor="growerList" className="form-label mt-4">
        Grower
      </label>
      <select
        value={selectedValue} // 受控组件，值由父组件状态控制
        onChange={handleGrowerChange} // 绑定处理函数
        name="growerList"
        className="form-select"
        id="growerList"
      >
        {/* 默认选项value设为空，对应父组件初始状态 */}
        <option value="">Please Select a Grower</option>
        {growers.map((grower) => (
          <option key={grower.id} value={`${grower.id} - ${grower.value}`}>
            {grower.id} - {grower.value}
          </option>
        ))}
      </select>
    </div>
  );
}

其他子组件的修改方式 #

SelectStacks、SelectCustomers、SelectCarriers的修改逻辑完全一致：

1. 复用相同的Props接口（可抽成公共类型如SelectComponentProps）
2. 移除内部状态，使用父组件传递的selectedValue和onValueChange
3. 正确绑定onChange事件，传递选中值给父组件

关键知识点解释 #

• 状态提升：React推荐将共享状态提升到最近的共同父组件中管理，这样多个子组件的状态可以统一维护，父组件能实时获取所有子组件的状态值。
• 受控组件：表单元素的value由React状态控制，onChange事件更新状态，确保组件状态与UI同步，父组件能随时拿到最新值。
• 回调传值：子组件通过props接收父组件的回调函数，在用户交互时调用回调传递数据，这是React实现子组件向父组件传值的标准方式。

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