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

问题描述

不仅仅是聚焦，而是真正打开组件和显示选项.我知道这在常规选择组件上并不简单(请参阅 是否可以使用 JS 打开 HTML 选择以显示其选项列表? )，但也许使用 React-Select 仍然可以.

Not just focusing, but to actually open the component and display options.I know this isn't simple on a regular select component (see Is it possible to use JS to open an HTML select to show its option list? ), but perhaps it is still possible with React-Select.

推荐答案

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

In react-select you can control the opening of the menu with menuIsOpen props. to achieve your goal I would use a combination of menuIsOpen, onInputChange and onFocus like this:

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 can receive the following events:

onInputChange 可以接收以下事件:

Depending of what kind of behaviour you're expecting I would update this live example.

这篇关于是否可以在安装时打开 React-Select 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！