React-Select：在菜单中保留所选项目

Question

在v1.0.0-beta10中使用React-Select，我希望将所选项目保留在菜单中，以便能够实现与MaterializeCss处的多选项类似的下拉列表

这是一个截图：

如何实现这种行为？

Answer 1

只需使用as you asked in react-select on GitHub中的removeSelected={false}，就可以完整完成this pull request。现在（2019年中），解决方案是：

hideSelectedOptions={false}

Answer 2

您可以访问名为filterOptions的prop，它接受一个带有属性选项searchFilter和selectedOptions的函数。

您应该始终能够返回与搜索过滤器匹配的选项，而不是像下面那样剥离selectedOptions（如果您使用的是underscrore / lodash。或者编写自己的方法。

const filterOptions = (options, searchFilter, selectedOptions) => {
  return _.filter(options, options => _.includes(option.value, searchFilter));
}

然后

<Select {...props} filterOptions={filterOptions} />

希望这个例子有所帮助。