Question

不仅要聚焦，还要实际打开组件并显示选项。我知道在常规选择组件上这并不简单（请参阅Is it possible to use JS to open an HTML select to show its option list?），但是React-Select仍然可能实现这一点。

Answer 1

在react-select中，您可以使用menuIsOpen道具来控制菜单的打开。为了实现您的目标，我将使用menuIsOpen，onInputChange和onFocus的组合，如下所示：

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

    this.state = {
      menuIsOpen: true
    };
  }

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

  onFocus = e => {
    this.setState({ menuIsOpen: true });
  };
  render() {
    return (
      <div className="App">
        <Select
          options={options}
          onFocus={this.onFocus}
          onInputChange={this.onInputChange}
          menuIsOpen={this.state.menuIsOpen}
        />
      </div>
    );
  }
}

onInputChange可以收到以下事件：

"set-value",
"input-change",
"input-blur",
"menu-close"

根据您期望的行为，我将更新此live example。

安装时可以打开React-Select组件吗？

1 个答案: