如何过滤 Material-UI Select 组件答案

【问题标题】：How to filter Material-UI Select component如何过滤 Material-UI Select 组件
【发布时间】：2021-04-21 11:01:19
【问题描述】：

我希望能够过滤Select组件中的选项列表。

Material-UI 在 The Autocomplete component API 中已经有这个选项（参见 filterOptions 属性），但在 Select 组件中没有。

当前行为：

我有 4 个不同的文本字段，它们使用相同的 options 列表（状态），当我在其中一个文本字段中选择一个选项时，我可以在其他 (3) 个字段中再次添加他。

预期行为

当我在其中一个文本字段中选择一个选项时，我希望此选项在其他文本字段中“隐藏”\“删除”。此外，当我从一个文本字段中删除值时，我希望他在其他文本字段中再次可用。

谢谢。

【问题讨论】：

请创建一个工作示例以便我们提供帮助。
为什么有 4 个不同的 TextFields？你的问题非常具体。
@NearHuscarl 每个字段都应该有不同的国家。我的用户最多应该选择 4 个不同的国家/地区。

标签： reactjs material-ui

【解决方案1】：

您可以添加另一个名为 chosenValues 或类似名称的数组，并在其中添加值（如果它们将被选中）。在每个 <TextField/> 中，您只需将过滤器添加到选项中，这样它就不会显示 chosenValues 数组中的值，例如：

 options = { options.filter(x => !chosenValues.includes(x) ) }

【讨论】：

这仅在我每次添加新值时才有效。但是，当我从其中一个文本字段中删除一些值时，该值不会返回到列表中。
是的，因为删除的时候要放回去

【解决方案2】：

您需要维护三个变量，例如让我们说

// contains the list of all users
 var originalList=[users]

// contains list of unselected users , initally will be originalList
var unselectedList=[]

// contains object of selected users
var selectedFields={textfield1:val, textfield2:val}

如果用户选择了一个值然后从未选择的变量中删除该用户，如果他选择了不同的用户然后从 originalList 中添加未选择的用户并放回，您可以参考此代码沙箱了解如何实现它

【讨论】：