加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – react-select如果显示“未找到结果”,如何以编程方式

发布时间:2020-12-15 16:20:12 所属栏目:百科 来源:网络整理
导读:Github Repo: react-select 在选择框中搜索后: 键入不在下拉列表中的文本并按下输入后.我想隐藏下拉框. 我的实施: Select ref={ input = this.input = input } name="form-field-name" searchable autoBlur clearable={false} openOnFocus onInputKeyDown
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?
    }
}

解决方法

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

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读