如何在焦点上显示选择框并在选择后关闭？答案

【问题标题】：How to show select box on focus and close after select?如何在焦点上显示选择框并在选择后关闭？
【发布时间】：2019-03-05 10:03:56
【问题描述】：

您能否告诉我如何在输入字段的焦点上显示选择框并在从下拉列表中选择项目后关闭？这是我的代码

return (
      <div className="App">
        <Select
          value={selectedOption}
          closeMenuOnSelect={false}
          menuIsOpen={menuIsOpen}
          isMulti={true}
          className="select-item"
          classNamePrefix="select-item"
          onInputChange={() => this.setState({ menuIsOpen: true })}
          onChange={this.handleSelectedChange}
          options={options}
        />
      </div>
    );

https://codesandbox.io/s/5v41wrxw9n

使用这个插件 https://github.com/JedWatson/react-select

【问题讨论】：

标签： reactjs redux react-select

【解决方案1】：

更新代码参考链接：https://codesandbox.io/s/mmjvp25z38

我使用 onFocus 显示下拉菜单
用于 handleSelectedChange 方法并通过设置状态更新 menuIsOpen 属性

【讨论】：

工作正常，但是当您在下拉菜单之外单击时不会隐藏。
@HarishSoni 请立即检查链接，我也更新以修复该问题