如何在React-Select中隐藏一个选项

Question

我有两个下拉框，根据一个下拉框中选择的值，我想隐藏另一个下拉框中的某些选项。

我尝试给选项对象添加className参数，以及标签和值参数，并尝试将所有具有上述className的选项的显示设置为none，但它没有将选项的className设置为我指定的那个。

[{'label':'x','value':'y',className:'hide'}]
.hide{
display:none
}

- Rohan Khanna

---

嗨@rohan-khanna，你能否更新你的问题并提供一个更详细的示例，说明你已经尝试了什么以及你的文件结构如何。谢谢。 - Laura

Answer 1

根据https://react-select.com/props，

filterOption

自定义方法，用于过滤决定菜单中是否应显示选项

你只需要使用filterOption。
例如，如果您想隐藏一个值为"hiddenOption"的选项，则需要：

<Select filterOption={(option) => option.value !== "hiddenOption"} />

- MohammadMahboobi

Answer 2

你可以使用自定义选项来实现这一点，v2 的文档在这里：https://react-select.com/components#replacing-components。

但在你的情况下，我认为你应该向对象列表中添加一些值，例如：

{label: '示例', value: '1234', shouldBeDisplayed:'false'}

下一步是自定义自定义选项：

const option = (props: OptionProps<any>) => (
  <div {...props.innerProps}>
    {props.data.shouldBeDisplayed? props.label : null}
  </div>
);

使用内部选择器：

<Select components={{ Option: option }} ..... />

希望能帮到你：)

- only_one