javascript - react 选择 : show only the matched options on typing on the select input

Question

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

如果选择输入为空并且 1.我专注于选择输入或， 2. 我点击位于右侧的倒箭头 选择输入，我会看到结果列表中的所有选项 默认情况下已提供给 Select 组件。

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

Answer 1

使用 menuIsOpen 属性控制菜单的呈现，并为 onInputChange、onChange 和 onBlur 添加自定义事件处理程序:onInputChange 您只需检查执行的操作是否为输入更改，然后设置 openMenu (在组件状态下)为真； 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