Question

鉴于在react-select（https://jedwatson.github.io/react-select/）中做出选择，我使用axios（https://github.com/mzabriskie/axios）从远程URL获取数据，以便在页面上填充第二个react-select。

我认为我的用例与Async示例的不同之处在于，我不希望用户必须在第二个选择中输入以触发自动填充。我希望当数据从AJAX调用返回时立即发生自动填充

我已经确认我正确地抓取了远程数据，但是我无法确定反应选择的loadOptions参数的正确语法。代码中最接近我想要的例子就是这个函数来自项目的例子

https://github.com/JedWatson/react-select/blob/master/examples/src/components/GithubUsers.js#L36

感谢您提供的任何提示

Answer 1

在github异步示例中，输入参数getUsers(input)是搜索文本。

您可以将第一个react-select值存储在组件状态中，而loadOptions promise将使用此状态值firstSelectValue

获取端点

getUsers() {
   return fetch(`https://api.github.com/search/users?q=${this.state.firstSelectValue}`)
     .then((response) => response.json())
     .then((json) => {
        return { options: json.items };
    });
}

Answer 2

您似乎正在尝试进行相关的选择类型的场景，其中传递了第二个选择将使用的其他参数，并且您需要在打开时使用新选项。

我通过覆盖AsyncSelect并调整我的loadOptions来做到这一点（使用当前版本）。

import Select from 'react-select/lib/Async';

export default class AsyncSelect extends Select {
  /**
   * reload()
   * Called when optional load arguments change, to reload the
   * data from remote source with new options
   * loadOptions={
   *  (inputValue) => this.props.loadOptions(
   *      inputValue,
   *      this.props.loadArguments
   *    )
   *  }
   */
  reload() {
    this.loadOptions('', options => {
      const isLoading = !!this.lastRequest;
      this.setState({ defaultOptions: options || [], isLoading });
    });
  }

  componentWillReceiveProps(nextProps) {
    // if the cacheOptions prop changes, clear the cache, force a reload
    if (nextProps.cacheOptions !== this.props.cacheOptions) {
      this.optionsCache = {};
    }
    /**
     * loadArguments
     * Optional property used in the remote request.
     * If these change externally, then the options should be reloaded.
     * This is handy for things like related selects.
     */
    if (nextProps.loadArguments !== this.props.loadArguments) {
      this.reload();
    }
    if (nextProps.defaultOptions !== this.props.defaultOptions) {
      this.setState({
        defaultOptions: Array.isArray(nextProps.defaultOptions)
          ? nextProps.defaultOptions
          : undefined
      });
    }
  }
}

然后，在我的组件中：

const {loadArguments, myLoadFunc, ...attributes} = this.props;
return (
  <AsyncSelect
    {...attributes}
    className={classes}
    defaultOptions
    loadArguments={loadArguments}
    loadOptions={(inputValue) => myLoadFunc(inputValue, loadArguments)}
    value={selected}
    onChange={this.onChange}
  />
);

异步填充react-select

2 个答案: