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

问题描述 投票:5回答:2

Github Repo:react-select

在选择框中搜索后:

enter image description here

键入不在下拉列表中的文本并按下输入后。我想隐藏下拉框。

我的实施:

<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}
/>

使用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?
    }
}
reactjs react-select
2个回答
6
投票

在V2中,您可以通过将noOptionsMessage设置为返回null的函数来实现此目的:

<Select noOptionsMessage={() => null}/>

这将阻止后备选项完全显示。请注意,将noOptionsMessage直接设置为null将导致错误,此处预期的道具类型是一个函数。


1
投票

尝试使用noResultsText道具。每当你想隐藏它时,将它设置为null

© www.soinside.com 2019 - 2024. All rights reserved.