如何将DropDown组件的选中值传递至React父组件App.tsx

1. 改造子组件 DropDown.tsx #

给子组件添加onChange属性，在选中项切换时调用该回调函数，把选中值传递给父组件。

示例代码：

import { useState } from 'react';

// 定义选项类型，可根据实际需求调整
type Option = {
  value: string;
  label: string;
};

// 子组件Props类型
type DropDownProps = {
  options: Option[];
  onChange: (selectedValue: string) => void;
  defaultValue?: string; // 可选：默认选中值
};

export default function DropDown({ options, onChange, defaultValue }: DropDownProps) {
  const [selected, setSelected] = useState<string>(defaultValue || options[0]?.value || '');

  const handleOptionSelect = (value: string) => {
    setSelected(value);
    // 调用父组件传入的回调，传递选中值
    onChange(value);
  };

  return (
    {/* 替换为你的Tailwind UI Simple Selector结构 */}
    <div className="relative">
      <button className="rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
        {options.find(opt => opt.value === selected)?.label || '请选择'}
      </button>
      <div className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
        {options.map((option) => (
          <div
            key={option.value}
            className={`cursor-pointer select-none py-2 pl-10 pr-4 ${selected === option.value ? 'bg-indigo-100 text-indigo-900' : 'text-gray-900'}`}
            onClick={() => handleOptionSelect(option.value)}
          >
            {option.label}
          </div>
        ))}
      </div>
    </div>
  );
}

2. 改造父组件 App.tsx #

在父组件中定义处理选中变化的函数，将其作为onChange属性传给DropDown，即可接收子组件传递的选中值。

示例代码：

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

export default function App() {
  const [selectedValue, setSelectedValue] = useState<string>('');

  // 接收子组件传递的选中值
  const handleSelectChange = (value: string) => {
    setSelectedValue(value);
    console.log('当前选中值：', value);
    // 这里可添加后续业务逻辑，比如接口请求、状态同步等
  };

  // 示例选项数据
  const options = [
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'angular', label: 'Angular' },
  ];

  return (
    <div className="p-8">
      <DropDown 
        options={options} 
        onChange={handleSelectChange}
        defaultValue="react" // 可选：设置初始选中值
      />
      <p className="mt-4 text-gray-700">当前选中框架：{selectedValue}</p>
    </div>
  );
}

关键提示 #

• 这是React父子组件通信的标准方式：子组件通过接收父组件传入的回调函数，主动将内部状态传递出去。
• 如果你的DropDown是基于原生<select>标签实现的，直接给<select>绑定onChange事件，通过event.target.value获取选中值后调用父组件的onChange即可，逻辑一致。
• 若使用JavaScript而非TypeScript，可去掉所有类型定义部分。

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