根据另一个选择中选定的值更改选择中的值

Question

我的应用程序有两个用于选择选项的字段，我想在这些字段之间设置依赖关系。

在一个字段中，用户可以选择支付系统（“visa”或“master”），根据这一选择，应显示不同的值（1000$,3000$,5000$ 或 2000$,4000$,8000$）在其他领域。

看看下面的文件

export const pay: Pay[] = [
  {
    name: 'visa',
    bitrates: [
      { name: '1000$', value: 1000 },
      { name: '3000$', value: 3000 },
      { name: '5000$', value: 5000 },
    ],
  },
  {
    name: 'master',
    bitrates: [
      { name: '2000$', value: 2000 },
      { name: '4000$', value: 4000 },
      { name: '8000$', value: 8000 },
    ],
  },
];

接下来，我有三个组件：一个为两个选择所共用，两个为选择。 对于“选择”字段，我使用 Radix 库 https://www.radix-ui.com/primitives/docs/components/select。但无论哪个库，我都想了解如何根据 PaySistemSelect 组件中的值更改 PriceSelect 组件中的值的原理 往下看吧

CommonOptions.tsx

export function CommonOptions() {
  return (
    <div>
      <PaySistemSelect />
      <PriceSelect />
    </div>
  );
}

PaySistemSelect.tsx

export function PaySistemSelect() {
  return (
    <Select.Root>
      <Select.Trigger>
        <Select.Value placeholder="Select pay sistem" />
      </Select.Trigger>
      <Select.Content>
        <Select.Viewport>
          <Select.Item key="" value="" />
          {/* {listWithPaySistem.map((res) => ( */}
          <Select.Item
            // key={res.id}
            value="Something"
          >
            {/* <Select.ItemText>{res.name}</Select.ItemText> */}
          </Select.Item>
          {/* ))} */}
        </Select.Viewport>
      </Select.Content>
    </Select.Root>
  );
}

价格选择.tsx

export function PriceSelect() {
  return (
    <Select.Root>
      <Select.Trigger>
        <Select.Value placeholder="Select price" />
      </Select.Trigger>
      <Select.Content>
        <Select.Viewport>
          <Select.Item key="" value="" />
          {/* {listWithPrice.map((res) => ( */}
          <Select.Item
            // key={res.id}
            value="Something"
          >
            {/* <Select.ItemText>{res.name}</Select.ItemText> */}
          </Select.Item>
          {/* ))} */}
        </Select.Viewport>
      </Select.Content>
    </Select.Root>
  );
}

Answer 1

要扩展 Artyom Ganev 的 comment，您需要使用 React 的 state 和 props 将选定的支付系统值从

CommonOptions

父组件传递到

PaySistemSelect

和

PriceSelect

组件。它将允许

PriceSelect

根据

PaySistemSelect

中选择的支付系统动态更新其选项。

首先，在

CommonOptions

组件中维护所选支付系统的状态。每当选择新的支付系统并传递给

PaySistemSelect

和

PriceSelect

时，该状态都会更新。

import React, { useState } from 'react';
import { PaySistemSelect } from './PaySistemSelect';
import { PriceSelect } from './PriceSelect';
import { pay } from './payData'; // Assuming payData is the file with your `pay` array

export function CommonOptions() {
  const [selectedPaySystem, setSelectedPaySystem] = useState('');

  return (
    <div>
      <PaySistemSelect
        setSelectedPaySystem={setSelectedPaySystem}
      />
      <PriceSelect
        selectedPaySystem={selectedPaySystem}
      />
    </div>
  );
}

修改

PaySistemSelect

以通过 props 接受

setSelectedPaySystem

函数。当选择支付系统时，使用此函数更新父级的状态。它使用 Radix（此处为

Select

组件）来创建用于选择支付系统和相应价格选项的下拉菜单。

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

export function PaySistemSelect({ setSelectedPaySystem }) {
  return (
    <Select.Root onValueChange={setSelectedPaySystem}>
      <Select.Trigger>
        <Select.Value placeholder="Select pay system" />
      </Select.Trigger>
      <Select.Content>
        <Select.Viewport>
          <Select.Item key="visa" value="visa">
            <Select.ItemText>Visa</Select.ItemText>
          </Select.Item>
          <Select.Item key="master" value="master">
            <Select.ItemText>Master</Select.ItemText>
          </Select.Item>
        </Select.Viewport>
      </Select.Content>
    </Select.Root>
  );
}

从那里，

PriceSelect

需要根据所选的支付系统过滤可用选项。它将收到

selectedPaySystem

作为道具：

import React from 'react';
import * as Select from '@radix-ui/react-select';
import { pay } from './payData'; // Assuming this is your data file

export function PriceSelect({ selectedPaySystem }) {
  const options = pay.find(p => p.name === selectedPaySystem)?.bitrates || [];

  return (
    <Select.Root>
      <Select.Trigger>
        <Select.Value placeholder="Select price" />
      </Select.Trigger>
      <Select.Content>
        <Select.Viewport>
          {options.map((option) => (
            <Select.Item key={option.value} value={option.name}>
              <Select.ItemText>{option.name}</Select.ItemText>
            </Select.Item>
          ))}
        </Select.Viewport>
      </Select.Content>
    </Select.Root>
  );
}

这应该允许您通过将状态提升到它们的共同父组件并将其作为 props 向下传递来在兄弟组件之间共享状态。