实现两个Select组件联动：根据支付系统选择切换价格选项

核心思路是状态提升：将支付系统的选中状态放到父组件CommonOptions中，通过props将状态和回调传递给子组件，实现两个选择器的联动。

步骤1：修改父组件CommonOptions.tsx #

在父组件中管理支付系统的选中值，并根据选中值筛选对应的价格选项：

import { useState } from 'react';
import { PaySistemSelect } from './PaySistemSelect';
import { PriceSelect } from './PriceSelect';
import { pay } from './你的数据文件路径';

export function CommonOptions() {
  // 管理选中的支付系统，初始值为空
  const [selectedPaySystem, setSelectedPaySystem] = useState<string>('');
  
  // 根据选中的支付系统筛选对应的价格选项
  const currentPriceOptions = selectedPaySystem 
    ? pay.find(item => item.name === selectedPaySystem)?.bitrates || []
    : [];

  return (
    <div>
      {/* 传递选中值和 onChange 回调给支付系统选择器 */}
      <PaySistemSelect 
        value={selectedPaySystem}
        onValueChange={setSelectedPaySystem}
      />
      {/* 传递筛选后的价格选项给价格选择器 */}
      <PriceSelect options={currentPriceOptions} />
    </div>
  );
}

步骤2：改造PaySistemSelect.tsx #

让组件接收value和onValueChange属性，渲染支付系统选项：

import * as Select from '@radix-ui/react-select';
import { pay } from './你的数据文件路径';

type PaySistemSelectProps = {
  value: string;
  onValueChange: (value: string) => void;
};

export function PaySistemSelect({ value, onValueChange }: PaySistemSelectProps) {
  return (
    <Select.Root value={value} onValueChange={onValueChange}>
      <Select.Trigger>
        <Select.Value placeholder="选择支付系统" />
      </Select.Trigger>
      <Select.Content>
        <Select.Viewport>
          {/* 渲染空选项 */}
          <Select.Item key="" value="">请选择</Select.Item>
          {/* 遍历pay数组渲染支付系统选项 */}
          {pay.map((system) => (
            <Select.Item key={system.name} value={system.name}>
              <Select.ItemText>{system.name}</Select.ItemText>
            </Select.Item>
          ))}
        </Select.Viewport>
      </Select.Content>
    </Select.Root>
  );
}

步骤3：改造PriceSelect.tsx #

让组件接收价格选项options，动态渲染对应的价格选项：

import * as Select from '@radix-ui/react-select';

type Bitrate = {
  name: string;
  value: number;
};

type PriceSelectProps = {
  options: Bitrate[];
};

export function PriceSelect({ options }: PriceSelectProps) {
  return (
    <Select.Root>
      <Select.Trigger>
        <Select.Value placeholder="选择价格" />
      </Select.Trigger>
      <Select.Content>
        <Select.Viewport>
          {/* 只有当有选项时才渲染，或者保留空选项 */}
          {options.length === 0 ? (
            <Select.Item key="" value="" disabled>请先选择支付系统</Select.Item>
          ) : (
            options.map((price) => (
              <Select.Item key={price.value} value={price.value.toString()}>
                <Select.ItemText>{price.name}</Select.ItemText>
              </Select.Item>
            ))
          )}
        </Select.Viewport>
      </Select.Content>
    </Select.Root>
  );
}

核心原理说明 #

• 状态提升：将原本分散在子组件的状态（支付系统选中值）移到父组件，父组件成为状态的唯一管理者，确保两个子组件的数据同步。
• props传递：子组件通过props接收父组件的状态和回调函数，实现数据的单向流动：用户选择支付系统 → 父组件更新状态 → 父组件筛选价格选项 → 价格选择器更新渲染内容。
• 动态渲染：价格选择器根据父组件传入的options动态生成选项，实现依赖联动效果。

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