根据特定条件，在React下拉中的残疾选项

Question

我目前正在React中建立下拉组件。它已经工作正常 - 我现在只想在发生特定条件时才禁用一些选项。在这种情况下，我有两个下拉列表可用作滤波器系统。第一个是“从” - 滤波器，第二个a”到“ - 滤波器。如果您在“ from” -dropdown中选择一个选项，我希望“ to” dropdown禁用所选和所有以前的选项。

这是我的代码：

import {
  Dropdown,
  IDropdownStyles,
  IDropdownOption,
} from "@fluentui/react";    

interface DropdownProps {
  options: IDropdownOption[],
  placeholder: string,
  setDropdown: Dispatch<SetStateAction<string>>
}

const dropwdownStyles: Partial<IDropdownStyles> = {
  dropdown: { width: 300 },
};

export const DropdownId = (props: DropdownProps) => {
  return (
    <div className={styles.root}>
      <Dropdown
        placeholder={props.placeholder}
        options={props.options}
        styles={dropwdownStyles}
        onChange={(e, options) => {
          props.setDropdown(`${options?.key}`)
        }}
      />
    </div>
  );
};

在index.tsx中实现下拉列表：

    <Container>
                      <DropdownId options={apiTagsResponse.map(tag => ({ text: tag, key: tag }))} setDropdown={setStartObjectId} placeholder="Set Start Tag" />
                    </Container>
                    <Container>to</Container>
                    <Container>
                      <DropdownId options={apiTagsResponse.map(tag => ({ text: tag, key: tag }))} setDropdown={setEndObjectId} placeholder="Set End Tag" />
                    </Container>
                    <Container>
                      <DropdownApplyFilterButton onClick={() => setButtonClicked(true)} />
                    </Container>

结果：