React自定义Dropdown组件获取选中值的实现方案有哪些？

1. 回调函数传参（标准最优方案） #

你目前用到的回调传参是React生态下的标准最优实现，完全符合React单向数据流的设计理念，不需要父组件持有子组件实例引用，状态更新逻辑可控可追踪，Ant Design、MUI等主流开源组件库的下拉选择组件都采用该方案，行业通用规范一般会把回调命名为onChange更符合通用语义。

示例实现：

// 子组件Dropdown内部逻辑
const Dropdown = ({ valueList, onChange }) => {
  const [selected, setSelected] = useState(null);

  const handleSelect = (val) => {
    setSelected(val);
    onChange(val); // 选中时直接将值传递给父组件回调
  };

  // 下拉框渲染逻辑省略
}

// 父组件调用
const Parent = () => {
  const handleSelect = (value) => {
    console.log('选中值：', value);
    // 后续业务逻辑直接在该回调内处理即可
  };

  return <Dropdown valueList={list} onChange={handleSelect} />
}

该方案逻辑清晰、无额外性能开销、调试难度低，是React官方推荐的父子组件数据传递方式。

2. 实例方法调用（你提到的类似原生的主动取值方式） #

该方案可以实现，但不属于常规最优方案，仅适合特殊场景：比如需要在某个异步触发的时机主动拉取选中值、不需要每次选中都触发回调的场景。需要配合useRef和useImperativeHandle两个React API，将子组件的方法暴露给父组件调用。

示例实现：

// 子组件实现，需要用forwardRef转发ref
import { useState, useImperativeHandle, forwardRef } from 'react';
const Dropdown = forwardRef(({ valueList }, ref) => {
  const [selected, setSelected] = useState(null);

  // 暴露给父组件的方法定义
  useImperativeHandle(ref, () => ({
    getSelectedValue: () => selected
  }));

  // 下拉选中逻辑、渲染逻辑省略
  return <div>{/* 下拉框UI */}</div>
});

父组件调用示例：

import { useRef } from 'react';
const Parent = () => {
  const dropdownRef = useRef(null);

  const handleGetVal = () => {
    // 主动调用子组件暴露的方法获取选中值
    const selectedVal = dropdownRef.current?.getSelectedValue();
    console.log('主动拉取的选中值：', selectedVal);
  };

  return (
    <>
      <Dropdown ref={dropdownRef} valueList={list} />
      <button onClick={handleGetVal}>点击获取下拉选中值</button>
    </>
  );
}

该方案的缺点是打破了单向数据流约定，父组件直接依赖子组件内部实现，维护成本更高，非特殊场景不推荐使用。

3. 状态提升方案 #

该方案也是常用的标准实现，适合复杂表单、多组件联动的场景：将下拉选中状态完全放到父组件管理，子组件仅做渲染和交互触发，也就是React官方提到的受控组件实现方式。

示例实现：

// 父组件逻辑
const Parent = () => {
  // 选中状态存储在父组件
  const [selectedVal, setSelectedVal] = useState(null);

  return (
    <>
      <Dropdown 
        valueList={list} 
        value={selectedVal} 
        onChange={setSelectedVal} 
      />
      {/* 父组件可以直接使用selectedVal，不需要主动调用方法取值 */}
      <p>当前选中值：{selectedVal}</p>
    </>
  )
}

// 子组件作为受控组件实现
const Dropdown = ({ valueList, value, onChange }) => {
  const handleSelect = (val) => {
    onChange(val);
  };
  // 渲染时直接使用props传入的value，不需要内部维护状态
  // 渲染逻辑省略
}

方案选择建议 #

• 普通场景优先选择回调函数方案，适配90%以上的业务需求
• 复杂表单、多组件联动场景优先选择状态提升的受控组件方案
• 仅在需要主动异步拉取选中值的特殊场景，再选择ref暴露实例方法的方案

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