React Async Select - PullRequest
Новая
       20

React Async Select

0 голосов
/ 20 ноября 2018

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

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

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

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

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

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

https://codesandbox.io/s/vnmvrwoj63

0 голосов
/ 20 ноября 2018

Включив 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

...