React-Select 如何保持菜单打开/关闭的默认行为以及添加到单击按钮时打开的菜单？

Question

我有一个反应选择组件来在 api 上执行搜索，还有一个按钮来开始搜索。

我尝试在单击按钮后设置 menuIsOpen={true} 但它破坏了原始的焦点模糊行为，菜单不再关闭模糊。尝试在输入上设置 .focus() 它没有打开菜单。

当前的原始行为菜单在焦点时打开，在模糊时关闭，我想保留这一点，而且我想在单击按钮后打开菜单。

Answer 1

为了达到你想要的效果，你需要使用受控的menuIsOpen道具。

我认为保留所有本机功能的最简单方法react-select是使用 props 的组合onInputChange，onFocus如以下代码所示：

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      menuIsOpen: false
    };
  }

  onInputChange = (options, { action }) => {
    if (action === "menu-close") {
      this.setState({ menuIsOpen: false });
    }
  };

  openMenu = () => {
    this.refs.focus();
    this.setState({ menuIsOpen: true });
  };

  render() {
    return (
      <div className="App">
        <Select
          ref={r => {
            this.refs = r;
          }}
          options={options}
          onFocus={this.openMenu}
          onInputChange={this.onInputChange}
          menuIsOpen={this.state.menuIsOpen}
        />

        <button onClick={this.openMenu}>Open Select</button>
      </div>
    );
  }
}

这是一个活生生的例子。