根据特定条件在反应下拉列表中禁用选项答案

【问题标题】：Disabled options in react dropdown depending on specific conditions根据特定条件在反应下拉列表中禁用选项
【发布时间】：2022-06-13 15:59:51
【问题描述】：

我目前正在 react 中构建一个下拉组件。它已经可以正常工作了-我现在希望仅在发生特定情况时才禁用某些选项。在这种情况下，我有两个用作过滤系统的下拉菜单。第一个是“从”过滤器，第二个是“到”过滤器。如果您在“from”-下拉菜单中选择一个选项，我希望“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>
  );
};

结果：

【问题讨论】：

请提供一个最小的可重现示例
您介意添加完整的道具，以便我们了解您实际在做什么吗？

标签： reactjs typescript dropdown