如何在父组件触发事件时将子组件select状态传递给父组件

这里给你两个最实用的方案，按需选择：

方案一：父组件点击时统一获取子组件值（适合子组件必须自持状态的场景） #

利用React的forwardRef和useImperativeHandle，让父组件能在需要的时候（比如点击按钮）主动获取子组件的选中值，避免实时触发添加逻辑。

父组件（Product）代码： #

import { useRef } from 'react';
import ProductOptions from './ProductOptions';

function Product() {
  // 给每个子组件创建ref
  const optionRefs = [useRef(null), useRef(null)];

  const handleAddToCart = () => {
    // 点击时统一收集所有子组件的选中值
    const optionsToPost = optionRefs.map(ref => ref.current?.getSelectedId());
    // 这里就拿到了[10,14]这类数组，直接提交即可
    console.log('要提交的选项：', optionsToPost);
  };

  return (
    <div>
      <ProductOptions ref={optionRefs[0]} />
      <ProductOptions ref={optionRefs[1]} />
      <button onClick={handleAddToCart}>加入购物车</button>
    </div>
  );
}

子组件（ProductOptions）代码： #

import { useState, useImperativeHandle, forwardRef } from 'react';

// 用forwardRef让父组件能拿到子组件的ref
const ProductOptions = forwardRef((props, ref) => {
  const [selectedId, setSelectedId] = useState(null);

  // 给父组件暴露获取选中值的方法
  useImperativeHandle(ref, () => ({
    getSelectedId: () => selectedId
  }));

  const handleChange = (e) => {
    setSelectedId(Number(e.target.value));
  };

  return (
    <select onChange={handleChange} value={selectedId || ''}>
      <option value="">请选择</option>
      <option value="10">选项A</option>
      <option value="14">选项B</option>
      {/* 其他选项... */}
    </select>
  );
});

export default ProductOptions;

方案二：父组件统一管理所有选项状态（推荐，符合React单向数据流） #

把子组件的状态上移到父组件，子组件只负责渲染和触发状态更新，点击按钮时直接读取父组件的状态数组即可，逻辑更清晰。

父组件（Product）代码： #

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

function Product() {
  // 初始化选项数组，长度对应子组件数量
  const [selectedOptions, setSelectedOptions] = useState([null, null]);

  // 子组件选择变化时，更新对应位置的状态
  const updateOption = (index, value) => {
    const newOptions = [...selectedOptions];
    newOptions[index] = value;
    setSelectedOptions(newOptions);
  };

  const handleAddToCart = () => {
    // 过滤掉未选择的项，得到要提交的数组
    const optionsToPost = selectedOptions.filter(id => id !== null);
    console.log('要提交的选项：', optionsToPost);
  };

  return (
    <div>
      <ProductOptions 
        value={selectedOptions[0]}
        onChange={(val) => updateOption(0, val)}
      />
      <ProductOptions 
        value={selectedOptions[1]}
        onChange={(val) => updateOption(1, val)}
      />
      <button onClick={handleAddToCart}>加入购物车</button>
    </div>
  );
}

子组件（ProductOptions）代码： #

function ProductOptions({ value, onChange }) {
  const handleChange = (e) => {
    onChange(Number(e.target.value));
  };

  return (
    <select onChange={handleChange} value={value || ''}>
      <option value="">请选择</option>
      <option value="10">选项A</option>
      <option value="14">选项B</option>
      {/* 其他选项... */}
    </select>
  );
}

export default ProductOptions;

方案对比 #

• 方案一适合子组件有复杂本地逻辑、必须自持状态的场景
• 方案二更符合React的设计理念，逻辑清晰、易于维护，是优先推荐的方案

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