onChange react-select 多个选项

Question

我需要检测我输入的内容是否可搜索 react-select。根据 official 文档，首先我必须传递 isMulti 道具才能 select 不仅仅是一个选项。

实际的内置 onChange 仅在我 select 一个选项时检测到变化，而不是在我输入框时检测到变化。我需要它，因为如果我在该输入框中键入内容，我必须调用 API。

这是我的 select:

  <Select
    options={myOptions}
    isMulti
    loadingIndicator={true}
    styles={selectStyle}
    onChange={(e) => console.log(`e`, e)}
  />

实际上 onChange 向我记录了一个包含选项 selected 的数组。我怎样才能改变它，例如，如果我输入“fo”然后我有“fo”？有什么选择或方法吗？

Answer 1

There is no onKeyDown props available in react-select's documentation.

您可以做的如下：

class App extends Component {

  onKeyUp = () => {
    console.log("I see");
    // Your rest code
  };

  render() {
    return (
      <div onKeyUp={this.onKeyUp} className="App">
          <Select
          options={myOptions}
          isMulti
          loadingIndicator={true}
          styles={selectStyle}
          onChange={(e) => console.log(`e`, e)}
          />
      </div>
    );
  }
}

Answer 2

是的，我们有异步 select 选项可以在用户输入时从 API 加载数据。下面我附上了他们官方网站上记录的代码。 https://react-select.com/home#async

import { useState } from "react";
import AsyncSelect from "react-select/async";

const colourOptions = [
  { label: "Oranage", value: "orange" },
  { label: "Yellow", value: "yellow" },
  { label: "Blue", value: "blue" }
];

const SelectOption = () => {
  const [inputValue, setInputValue] = useState("");

  const filterColors = (inputValue) => {
    return colourOptions.filter((i) =>
      i.label.toLowerCase().includes(inputValue.toLowerCase())
    );
  };

  const promiseOptions = (inputValue, callback) => {
    setTimeout(() => {
      callback(filterColors(inputValue));
    }, 1000);
  };

  const handleChange = (newValue) => {
    const inputValue = newValue.replace(/\W/g, "");
    setInputValue(inputValue);
    return inputValue;
  };

  return (
    <AsyncSelect
      cacheOptions
      defaultOptions
      loadOptions={promiseOptions}
      onInputChange={handleChange}
    />
  );
};

export default SelectOption;

onChange react-select 多个选项

onChange react-select multiple options

javascript

node.js

reactjs

react-select