时间戳

首页 > 解决方案 > 是否可以在安装时打开 React-Select 组件？

reactjs - 是否可以在安装时打开 React-Select 组件？

问题描述

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

标签： reactjsreact-select

解决方案

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

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"

根据您期望的行为类型，我会更新此实时示例。

推荐阅读