react-select：无结果时程序化隐藏下拉菜单及回车隐藏需求

问题1：如何在react-select显示“无结果匹配”时，程序化隐藏下拉菜单？ #

你可以通过手动维护menuIsOpen状态，结合输入值和选项的匹配结果来实现这个需求。核心思路是：监听输入框的变化，过滤出匹配的选项，如果没有匹配项就关闭下拉菜单。

实现步骤： #

1. 在组件的state中添加menuIsOpen和inputValue来控制菜单状态和记录输入内容：

state = {
  selectedOption: null,
  menuIsOpen: false,
  inputValue: ""
};

2. 编写处理输入变化的函数，判断是否有匹配选项并更新菜单状态：

handleInputChange = (inputValue) => {
  const { items } = this.props;
  // 过滤出与输入值匹配的选项（这里以label为例，你可以根据实际字段调整）
  const matchedOptions = items.filter(option => 
    option.label.toLowerCase().includes(inputValue.toLowerCase())
  );
  // 只有当有匹配结果时才保持菜单打开
  this.setState({
    inputValue,
    menuIsOpen: matchedOptions.length > 0
  });
};

3. 还要处理聚焦事件，确保点击输入框时能正常打开菜单：

handleFocus = () => {
  this.setState({ menuIsOpen: true });
};

4. 最后在Select组件中配置对应的属性：

<Select
  ref={input => this.input = input}
  name="form-field-name"
  searchable
  autoBlur
  clearable={false}
  openOnFocus={false} // 关闭默认的聚焦打开，改用我们自定义的逻辑
  onInputChange={this.handleInputChange}
  onFocus={this.handleFocus}
  menuIsOpen={this.state.menuIsOpen}
  value={this.state.selectedOption}
  onChange={this.handleChange.bind(this)}
  options={this.props.items}
/>

问题2：搜索不存在的文本并按回车键后隐藏下拉框 #

你已经用到了onInputKeyDown事件，只需要在这个事件里判断回车键，同时检查当前输入是否有匹配选项，没有的话直接调用react-select实例的closeMenu()方法即可（通过你已经定义的ref）。

修改你的onInputKeyDown方法： #

onInputKeyDown = (e) => {
  // 监听回车键（keyCode 13，也可以用e.key === 'Enter'）
  if (e.keyCode === 13) {
    const { items } = this.props;
    const inputValue = e.target.value.trim();
    
    // 检查是否存在匹配的选项
    const hasMatchingOption = items.some(option => 
      option.label.toLowerCase().includes(inputValue.toLowerCase())
    );
    
    // 如果没有匹配项，关闭下拉菜单
    if (!hasMatchingOption && this.input) {
      this.input.closeMenu();
    }
  }
};

这样当你输入不存在的内容并按回车时，下拉菜单就会自动收起了。如果你的组件是用自定义menuIsOpen状态的，也可以直接通过this.setState({ menuIsOpen: false })来关闭菜单，效果是一样的。

内容的提问来源于stack exchange，提问作者Sabbiu Shah