React-Select：将选定的项目保留在菜单中

Question

使用React-Select in v1.0.0-beta10, I'd like to keep selected items in menu in order to be able to implement a dropdown behaving similar as the multi-select at MaterializeCss

截图如下：

如何实现这种行为？

Answer 1

您可以访问一个名为 filterOptions 的道具，它接受一个函数，该函数采用属性选项、searchFilter 和 selectedOptions。

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

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

然后

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

希望这个例子对您有所帮助。

Answer 2

只是为了让这个完整as you asked in react-select on GitHub this was made possible using removeSelected={false} in this pull request。现在（2019 年中）解决方案是：

hideSelectedOptions={false}

React-Select：将选定的项目保留在菜单中

React-Select: keep selected items in menu

javascript

reactjs

react-select