React Async Select

Я борюсь с Async Select из react-select. Мне удалось отобразить некоторые параметры по умолчанию и выполнить асинхронную выборку их параметров с помощью обещаний и loadOptions prop.

Мне нужно обновить параметры (разрешить обещание), когда раскрывающийся список параметров отображается при нажатии. Есть ли способ выполнить то же обещание onClick (даже в onChange)?

Я использую следующий код, предоставленный командой react-select https://codesandbox.io/s/7w4w9yyrmx?module=/example.js

Спасибо за помощь!


reactjs react-select
person David Casanellas    schedule 20.11.2018    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Я действительно нашел способ решить эту проблему, используя простой react-select. Я собираюсь управлять options, используя установленное состояние реакции onMenuOpen. Используя этот подход, я могу контролировать, какие параметры отображаются, когда пользователь нажимает на выбор.

https://codesandbox.io/s/vnmvrwoj63

person David Casanellas    schedule 21.11.2018

arrow_upward
1
arrow_downward

Включив defaultOptions как true, Компонент немедленно загрузит loadOptions. Так что он работает как задумано.

На самом деле нет способа обновить options, потому что это будет сделано только при наличии inputValue && loadedInputValue. Вы можете предоставить запрос на включение, чтобы добавить эту функцию.

 render() {
      const { loadOptions, ...props } = this.props;
      const {
        defaultOptions,
        inputValue,
        isLoading,
        loadedInputValue,
        loadedOptions,
        passEmptyOptions,
      } = this.state;
      const options = passEmptyOptions
        ? []
        : inputValue && loadedInputValue ? loadedOptions : defaultOptions || [];
      return (
        // $FlowFixMe
        <SelectComponent
          {...props}
          filterOption={this.props.filterOption || null}
          ref={ref => {
            this.select = ref;
          }}
          options={options}
          isLoading={isLoading}
          onInputChange={this.handleInputChange}
        />
      );
    }

Источник: https://github.com/JedWatson/react-select/blob/master/src/Async.js#L150-L176

person Murat Karagöz    schedule 20.11.2018