如何在不同 select 的变化上使用 react-select-async-paginate 库？

Question

我正在尝试实现 2 select 框第一个 select 框将是简单的 select 框。第二个 select 框将具有无限滚动功能，为此，我正在使用 react-select-async-paginate 库。

问题说明

AsyncPaginate 是 react-select-async-paginate 库的组件。它使用 loadOptions 函数属性将选项加载到 select 框中，它期望 return 值为 {options: [], hasMore: false}.

在我的代码中，在 loadOptions 属性中，我正在调用 loadHostOptions 函数来获取选项。在更改第一个下拉列表时，我正在调用 loadHostOptions 函数。但在这种情况下，正确的选项不会反映在第二个下拉列表中。

任何人都可以帮助我如何在第一个下拉列表的变化中加载选项吗？

Here is codesandbox

代码

import React from "react";

import { AsyncPaginate } from "react-select-async-paginate";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstSelectVal: "",
      value: null
    };
  }

  firstSelectChange = (event) => {
    this.setState({ firstSelectVal: event.target.value });
    if (event.target.value) {
      this.loadHostOptions("java", []);
    }
  };

  onPagiChange = (event) => {
    this.setState({ value: event});
  };

  loadHostOptions = async (search, prevOptions) => {
    if (search === "java") {
      const responseJSON = {
        results: [
          {
            value: 1,
            label: "Java"
          }
        ],
        has_more: false
      };

      return {
        options: responseJSON.results,
        hasMore: responseJSON.has_more
      };
    } else {
      const responseJSON = {
        results: [
          {
            value: 1,
            label: "Java"
          },
          {
            value: 2,
            label: "C++"
          },
          {
            value: 3,
            label: "Python"
          },
          {
            value: 4,
            label: "Node"
          },
          {
            value: 5,
            label: "Go, Lang"
          }
        ],
        has_more: false
      };

      return {
        options: responseJSON.results,
        hasMore: responseJSON.has_more
      };
    }
  };

  render() {
    return (
      <div>
        <h1>react-select-async-paginate</h1>
        <h2>1st Selectbox</h2>
        <select
          id="lang"
          onChange={this.firstSelectChange}
          value={this.state.firstSelectVal}
        >
          <option value="">Select</option>
          <option value="java">Java</option>
        </select>
        {this.state.firstSelectVal ? (
          <>
            <h2>2nd Selectbox</h2>
            <AsyncPaginate
              value={this.state.value}
              loadOptions={(search, prevOptions) =>
                this.loadHostOptions(search, prevOptions)
              }
              onChange={(e) => this.onPagiChange(e)}
            />
          </>
        ) : (
          ""
        )}
      </div>
    );
  }
}

export default App;

Answer 1

您必须将 onPagiChange 函数更改为

onPagiChange = (event) => {
   this.setState({ value: event});
};

即设置整个 event 作为值而不是 event.value

更新

实际问题是，无论何时单击 AsyncPaginate 字段，它都会调用 loadHostOptions 函数并将当前值传递给 search 参数。在这种情况下，无论您输入什么，都将是 search 的值。因此，如果您想使用第一个 Select 框的值来过滤第二个框的选项，则必须直接在 loadHostOptions 函数内直接使用 this.state.firstSelectVal 。像这样

  loadHostOptions = async (search, prevOptions) => {
    if (this.state.firstSelectVal === "java") {
      const responseJSON = {
        results: [
          {
            value: 1,
            label: "Java"
          }
        ],
        has_more: false
      };

      return {
        options: responseJSON.results,
        hasMore: responseJSON.has_more
      };
    } else {
      const responseJSON = {
        results: [
          {
            value: 1,
            label: "Java"
          },
          {
            value: 2,
            label: "C++"
          },
          {
            value: 3,
            label: "Python"
          },
          {
            value: 4,
            label: "Node"
          },
          {
            value: 5,
            label: "Go Lang"
          }
        ],
        has_more: false
      };

      return {
        options: responseJSON.results,
        hasMore: responseJSON.has_more
      };
    }
  };

如何在不同 select 的变化上使用 react-select-async-paginate 库？

How to use react-select-async-paginate library on change of different select?

javascript

reactjs

react-select

react-select-async-paginate