react-select显示“未找到结果”时如何以编程方式隐藏下拉菜单?

Sab*_*hah 5 reactjs react-select

Github Repo:反应选择

在选择框中搜索后:

在此处输入图片说明

在键入下拉列表和回车中未包含的文本后,按。我想隐藏下拉框。

我的实现:

<Select
        ref={ input => this.input = input }
        name="form-field-name"
        searchable
        autoBlur
        clearable={false}
        openOnFocus
        onInputKeyDown={this.onInputKeyDown.bind(this)}
        value={this.state.selectedOption}
        onChange={this.handleChange.bind(this)}
        options={this.props.items}
/>
Run Code Online (Sandbox Code Playgroud)

使用onInputKeyDown我正在检测输入密钥代码。当显示“未找到结果”时,如何删除那里的下拉菜单?

onInputKeyDown(e) {
    if (e.keyCode === keys.ENTER) {            
        console.log('on input key down');
        // How to detect 'No results found' shown?
        // And then, how to close the dropdown?
    }
}
Run Code Online (Sandbox Code Playgroud)

Mar*_*itz 11

在V2中,您可以通过设置noOptionsMessage返回null以下内容的函数来实现:

<Select noOptionsMessage={() => null}/>
Run Code Online (Sandbox Code Playgroud)

这将阻止回退选项完全显示。请注意,直接设置noOptionsMessagenull会导致错误,此处所需的prop类型是一个函数。


Man*_*ama 1

尝试使用noResultsText道具。将其设置为null您想要隐藏它的任何时间。