反应异步 Select

Question

我正在为来自 react-select 的 异步 Select 而苦苦挣扎。我设法显示一些 defaultOptions 并使用 promises 和 loadOptions prop 异步获取其选项。

我需要的是在单击时显示选项下拉列表时更新选项（解决承诺）。有没有办法执行相同的承诺 onClick（即使在 onChange 中）？

我正在使用 react-select 团队 https://codesandbox.io/s/7w4w9yyrmx?module=/example.js

提供的以下代码笔

感谢您的帮助！

Answer 1

通过将 defaultOptions 启用为 true，组件将立即加载 loadOptions。所以它按预期工作。

实际上没有办法更新 options，因为它只有在有 inputValue && loadedInputValue 时才会更新。您可以提供 Pull Request 来添加该功能。

 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

Answer 2

我实际上找到了一种使用基本 react-select 来解决它的方法。我将使用设置为 onMenuOpen 的反应状态来管理 options。使用这种方法，我可以控制当用户单击 select.

时显示的选项

https://codesandbox.io/s/vnmvrwoj63

反应异步 Select

React Async Select

reactjs

react-select