React中如何将子下拉框值传递给父组件以切换子组件

要实现这个需求，你需要通过状态提升让父组件管理国家选中状态，并给子组件传递回调同步选中值，具体步骤如下：

• 1. 在父组件中添加状态变量存储选中的国家值
• 2. 给CountryDropdown传递onChange回调，子组件选中值变化时调用该回调更新父组件状态
• 3. 根据父组件的状态值，判断渲染StateSelector还是ProvinceSelector

修改后的完整父组件代码 #

import { useState } from 'react';

export function AddressCreator({ name }: AddressCreatorProps): React.JSX.Element {
  // 初始化选中状态，可根据需求设置默认值
  const [selectedCountry, setSelectedCountry] = useState<string>('');

  // 处理国家选中变化的回调函数
  const handleCountryChange = (value: string) => {
    setSelectedCountry(value);
  };

  return (
    <div>
      <CountryDropdown
        items={countryDropdownItems}
        labelText='Select a country'
        onChange={handleCountryChange} // 传递回调给子组件
      />
      {/* 根据选中国家切换显示的子组件 */}
      {selectedCountry.includes('US') ? (
        <StateSelector labelText='Select a state' />
      ) : (
        <ProvinceSelector labelText='Select a province' />
      )}
    </div>
  );
}

子组件CountryDropdown需配合修改 #

要让父组件的回调生效，需要在CountryDropdown内接收onChange属性，并在选中值变化时触发它：

type CountryDropdownProps = {
  items: { value: string; label: string }[];
  labelText: string;
  onChange: (value: string) => void; // 添加回调属性定义
};

export function CountryDropdown({ items, labelText, onChange }: CountryDropdownProps) {
  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onChange(e.target.value); // 将选中值传递回父组件
  };

  return (
    <div>
      <label>{labelText}</label>
      <select onChange={handleSelectChange}>
        {items.map(item => (
          <option key={item.value} value={item.value}>
            {item.label}
          </option>
        ))}
      </select>
    </div>
  );
}

关键说明 #

• 状态提升是React父子组件共享数据的标准方式，父组件持有状态，子组件通过回调更新状态
• 确保countryDropdownItems中美国选项的值包含US（比如值为US或United States），否则判断逻辑无法生效
• 如果需要默认选中某个国家，直接在useState中传入对应值即可（例如useState('US')）

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