react-select : 在选择输入上只显示匹配的选项

Question

我最近开始使用 react-select。( https://github.com/JedWatson/react-select )

如果选择输入为空并且 1. 我专注于选择输入 OR, 2. 我单击位于选择输入右侧的反向箭头，我将看到我提供的结果列表中的所有选项默认情况下选择组件。

除了上面提到的行为，当我在输入中输入内容时，我应该只能看到匹配的文本结果。我怎样才能做到这一点？

Answer 1

使用 menuIsOpen 属性控制菜单的呈现，并为 onInputChange、onChange 和 onBlur 添加自定义事件处理程序：onInputChange您只需检查执行的操作是否为输入更改，然后openMenu（在组件状态中）设置为 true；onChange和onBlur事件你只是隐藏菜单。

<Select
    inputValue={value}
    onInputChange={this.handleInputChange}
    onChange={this.hideMenu}
    onBlur={this.hideMenu}
    options={dataSource}
    menuIsOpen={openMenu}
/>

    handleInputChange = (query, { action }) => {
        if (action === "input-change") {
            this.setState({ openMenu: true });
        }
    };

hideMenu = () => {
    this.setState({ openMenu: false });
};

来源：https : //github.com/JedWatson/react-select/issues/2014#issuecomment-448549849