`react-select` 动态添加新值

Question

我有一个 react-select Async 组件。它已分配 loadOptions，并且从该列表中选择 options 时工作正常。

比如我刚好有一个列表：

[{value:"111", label:"3 x one"}, {value:"222", label:"3 x two}]

我还希望能够动态地向该组件添加 options，例如我想添加 {value: "333"}

我该怎么做？

谢谢 :-)

Answer 1

您可以使用 useState（已弃用）

const Example = () => {
  const [loadOptions, setLoadOptions] = useState([
    { value: '111', label: '3 x one' },
    { value: '222', label: '3 x two' }
  ])

  const handleClick = () => {
    setLoadOptions([...loadOptions, { value: '333', label: '3 x three' }])
  }

  return (
    <>
      <AsyncSelect 
        ...
        loadOptions={loadOptions} 
        ...
      />
      <Button onClick={handleClick}></Button>
    </>
  )
}

对于选定的值，只需尝试手动操作道具 value 和 onChange (docs)

更新 codesandbox link

Answer 2

options是一个数组，里面有可以选择的选项。 value 是一个被选中的值。两者是分开的。您可以有一个 options 的列表（比方说 ["a","b"]），而显示的值不同（比方说 ["c","d"]）。您可以通过多种方式更新选项。您可能还想在不使用 defaultOptions+loadOptions 的情况下“外部”控制自己的选项（顺便说一句，这在 v2 中有点混乱，因为 defaultOptions 仅在 init 上加载，以后不会更新）。

Answer 3

import React, { useState } from "react";
import Select from "react-select";

function Example() {
  const [loadOptions] = useState([
    { value: "111", label: "3 x one" },
    { value: "222", label: "3 x two" }
  ]);

  const [optionSelectedList, setOptionSelectedList] = useState([]);

  const handleClick = () => {
    setOptionSelectedList([
      ...optionSelectedList,
      { value: "333", label: "3 x three" }
    ]);
  };

  return (
    <div>
      <Select
        options={loadOptions}
        onChange={setOptionSelectedList}
        isMulti
        value={optionSelectedList}
      />

      <button onClick={handleClick}>Add option</button>
    </div>
  );
}

export default Example;

`react-select` 动态添加新值

`react-select` add new value dynamically

reactjs

react-select