Можно ли открыть компонент React-Select при его монтировании? - PullRequest
Новая
       18

Можно ли открыть компонент React-Select при его монтировании?

0 голосов
/ 19 января 2019

Не только для фокусировки, но и для фактического открытия компонента и отображения параметров.Я знаю, что это не просто на обычном компоненте select (см. Возможно ли использовать JS, чтобы открыть HTML-выбор, чтобы показать его список опций? ), но, возможно, это все еще возможно с React-Select.

1 Ответ

0 голосов
/ 21 января 2019

В 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"

В зависимости от того, какое поведение вы ожидаете, я обновлю этот живой пример .

...