使用react-select，同时选择多个匹配搜索的项目

Question

我用来react-select显示可搜索的项目下拉列表，用户可以在其中选择多个项目。我的列表很长，用户经常希望多重选择与相同过滤字符串匹配的许多项目，这是一个有点乏味的过程，因为每次选择一个项目时，下拉列表都会消失，您需要重新输入搜索。

例如，下面的沙箱有一个react-select列出了很多苹果和奶酪的沙箱。为了选择所有苹果，人们必须不断输入“Apple”并一次选择一个苹果。

https://codesandbox.io/s/2l99lry5p

来自桌面 UI 背景，我自然希望能够键入搜索查询，然后按Ctrl-A选择所有匹配的搜索结果并将它们添加到我的列表中，或者Ctrl-Click从匹配集中挑选多个项目。但据我所知，在反应选择中不支持任何这样的热键。

API 是否react-select有任何方法可以实现“全选”热键，该热键将选择与当前搜索过滤器匹配的所有内容（或者甚至页面上的显式“全选匹配”按钮也可以）？我看不到任何编程方式来访问与过滤器匹配的对象集。这是我需要分叉才能react-select实现的东西，还是可以通过现有的 API 以某种方式实现？

Answer 1

React Select具有内置属性，可用于防止菜单在选择时关闭并保留搜索字符串。

closeMenuOnSelect首先通过设置为 来防止菜单在选择时关闭false。

然后onInputChange将搜索字符串存储在stateif 操作 equals中'input-change'。

设置inputValue为this.state.value会将搜索字符串保留在输入字段中。

class Foo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
    }
    handleInputChange = (value, e) => {
        if (e.action === 'input-change') {
            this.setState({value});
        }
    }
    render() {
        return (
            <Select
                isMulti
                name="colors"
                options={options.map(x => MakeOption(x))}
                className="basic-multi-select"
                classNamePrefix="select"
                /* added these props */
                closeMenuOnSelect={false}
                onInputChange={this.handleInputChange}
                inputValue={this.state.value}
            />
        )
    }
}

更新的沙箱： https://codesandbox.io/s/yvmzx6pn6z