Question

假设我们有2个使用React-Select的Select Dropdowns。为简单起见，将它们称为Select1和Select2。我想返回一个自定义函数，该函数对Select2的每次更改都过滤Select1。

例如：

Select1 Options:
    [
     {label: 'option1', value: 'option1'},
     {label: 'option2', value: 'option2'},
   ]

Select2 Options:
    [
     {label: 'option4', value: 'option4'},
     {label: 'option5', value: 'option5'},
     {label: 'option6', value: 'option6'}
   ]

鉴于我在option1上选择了select1 然后，我应该只看到select2

的选项4和5

鉴于我在option2上选择了select1 然后，我应该只看到select2

的选项4、5和6

这是我想要实现的功能，由于我正在使用react Select，尽管我也许有一种方法可以链接这2个Select组件。

为每个Select1选项返回必要的数组选项的函数：

const operationPerResource = (resource: ResourceTypes): OperationTypes[] =>
  availableOperations[resource] || availableOperations.DEFAULT;

任何方式我们都能做到这一点。重要的是要监听onChange的{{1}}方法并更新select1选项。

我在API文档中看到了以下选项，但不确定执行情况：

select2

SelectComponents的结构

filterOption union = createFilter()
Custom method to filter whether an option should be displayed in the menu

One of<
function(
{
label string required
value string required
data required Object
},
string
) => boolean,
null
>

所以在这里，根据资源，我只想查看相关的操作。

数据不是来自API，而是在组件结构中是恒定的。

React Select-基于另一个Select Pick的一个Select Dropdown的过滤选项

0 个答案: