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

要展开Artyom Ganev‘S comment，您需要使用REACT的状态和props 将选定的支付系统值从CommonOptions父组件传递到PaySistemSelect和PriceSelect组件.它将允许PriceSelect基于PaySistemSelect中 Select 的支付系统动态更新其选项.

首先，在CommonOptions组件中维护所选支付系统的状态.每当 Select 新的支付系统并向下传递到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函数. Select 付款系统时，使用此功能更新父系统的状态.它使用Radix，这里是Select component来创建用于 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作为props :

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 传递下来，从而在sibling 组件之间共享状态.

at the moment, when opening a page with the PaySistemSelect and PaySistemSelect fields, these fields are empty (even if something was selected earlier). How can I set them to default values?
I see that Select.Root has defaultValue and value in its parameters. How can they be applied and what should be written there?

You should be able to use the defaultValue property of Select.Root in Radix UI.
However, if you want to restore selections based on user actions or saved preferences beyond the initial load, you might transition to using value and manage the state changes through user interactions or effects.

value使组件由Reaction控制，这意味着您可以通过props 在外部管理其状态.如果需要在初始渲染后以编程方式更新选定值，请使用该选项.

此解决方案(defaultValue)仅适用于具有"visa"的初始情况.如果我 Select "master"，则PriceSelect字段变为空.

如果在 Select "master"之后，PriceSelect字段变为空，则这可能是由于PriceSelect组件没有在初始呈现之后基于新 Select 的支付系统来更新其缺省值的机制.当你从"visa"切换到"master"时，PriceSelect需要动态调整其选项，并可能设置一个与"master"支付系统相对应的新的默认值.

try 使用React的效果钩(useEffect)来监听selectedPaySystemprops 中的变化.这样，您就可以在PriceSelect内设置一个确定 Select 哪个值的本地状态.该方法将组件转换为由Reaction控制，这意味着您将使用valueprops 而不是defaultValue来显式控制选定的选项.

import React, { useEffect, useState } 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 || [];
  const [selectedPrice, setSelectedPrice] = useState(options.length > 0 ? options[0].name : '');

  // Update the selected price when the selected payment system changes
  useEffect(() => {
    setSelectedPrice(options.length > 0 ? options[0].name : '');
  }, [selectedPaySystem, options]);

  return (
    <Select.Root value={selectedPrice} onValueChange={setSelectedPrice}>
      <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>
  );
}

通过在Select.Root上使用valueprops 并通过状态(selectedPrice)管理所 Select 的值，PriceSelect成为受控组件.这意味着它的当前价值始终由react 状态驱动，允许根据用户交互或外部变化(如切换支付系统)进行动态更新.