React异步选择器

Question

我正在处理 react-select 中的 Async Select。我成功地展示了一些默认选项，并使用 promise 和 loadOptions 属性异步获取其选项。

我需要的是当单击选项下拉列表时，更新选项（解决 promise）。是否有一种方法在单击（甚至在 onChange 中）时执行相同的 promise？

我正在使用由 react-select 团队提供的以下 codepen：https://codesandbox.io/s/7w4w9yyrmx?module=/example.js 感谢您的帮助！

- David Casanellas

Answer 1

我实际上找到了一种使用基本的react-select解决它的方法。我将使用在onMenuOpen设置的React状态来管理options。使用这种方法，当用户点击选择时，我可以控制显示哪些选项。 https://codesandbox.io/s/vnmvrwoj63

- David Casanellas

Answer 2

通过将defaultOptions设置为true，组件将立即加载loadOptions。因此它正在按预期工作。

实际上没有更新options的方法，因为只有在存在inputValue && loadedInputValue时才会这样做。您可以提供一个Pull请求来添加该功能。

 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

- Murat Karagöz