Reactjs `react选择“动态添加新值”

我有一个

react-select

Async

组件。它已分配了

loadOptions

，从该列表中选择

options

时工作正常

例如，我碰巧有一个列表：

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

我还希望能够将

选项

动态添加到此组件，例如，我希望添加

{value:“333”}

我怎么做

---

谢谢：-）

您可以使用

useState

（已弃用）

const示例=（）=>{
const[loadOptions，setLoadOptions]=useState([
{值：'111'，标签：'3x1'}，
{值：'222'，标签：'3x2'}
])
常量handleClick=（）=>{
setLoadOptions（[…loadOptions，{value:'333'，label:'3xThree'}]）
}
返回(
)

更新代码沙盒链接

您可以使用
useState
（已弃用）

const示例=（）=>{
const[loadOptions，setLoadOptions]=useState([
{值：'111'，标签：'3x1'}，
{值：'222'，标签：'3x2'}
])
常量handleClick=（）=>{
setLoadOptions（[…loadOptions，{value:'333'，label:'3xThree'}]）
}
返回(
)

更新代码沙盒链接

选项
是一个包含可选择选项的数组。
value
是一个选定的值。
两者是分开的。您可以有一个
选项列表
（比如说[“a”，“b”]），而显示的值是不同的（比如说[“c”，“d”]）。
您可以通过多种方式更新选项。您可能还希望自己“从外部”控制选项，而不使用defaultOptions+loadOptions（顺便说一句，在v2中这有点混乱，因为defaultOptions仅在init上加载，以后不会更新）。
options
是一个带有可选择选项的数组。
value
是一个选定的值。
两者是分开的。您可以有一个
选项列表
（比如说[“a”，“b”]），而显示的值是不同的（比如说[“c”，“d”]）。
您可以通过多种方式更新选项。您可能还希望自己“从外部”控制选项，而不使用defaultOptions+loadOptions（顺便说一句，在v2中这有点混乱，因为defaultOptions仅在init上加载，以后不会更新）。
import React，{useState}from“React”；
从“反应选择”导入选择；
函数示例（）{
常量[loadOptions]=useState([
{值：“111”，标签：“3x1”}，
{值：“222”，标签：“3x2”}
]);
const[optionSelectedList，setOptionSelectedList]=useState（[]）；
常量handleClick=（）=>{
设置选项选择列表([
…选项选择列表，
{值：“333”，标签：“3x3”}
]);
};
返回(
添加选项
);
}
导出默认示例；
导入React，{useState}来自“React”；
从“反应选择”导入选择；
函数示例（）{
常量[loadOptions]=useState([
{值：“111”，标签：“3x1”}，
{值：“222”，标签：“3x2”}
]);
const[optionSelectedList，setOptionSelectedList]=useState（[]）；
常量handleClick=（）=>{
设置选项选择列表([
…选项选择列表，
{值：“333”，标签：“3x3”}
]);
};
返回(
添加选项
);
}
导出默认示例；
我做了以下逻辑->我在列表中添加了最后一项“其他”当用户选择它时，下面会出现一个新字段，可以在列表中添加新项目。这可能不是最好的方法，但效果很好。我不希望用户选择它，新项目需要动态添加，例如单击组件外部的按钮。那么问题出在哪里呢？创建新组件，它将d数组中的新选项。我的按钮需要将新选项添加到已选择的
选项列表中，而不是添加到可用选项列表中。我进行了以下逻辑->我在列表中添加了最后一项“其他”当用户选择它时，下面会出现一个新字段，可以在列表中添加新项目。这可能不是最好的方法，但效果很好。我不希望用户选择它，新项目需要动态添加，例如单击组件外部的按钮。那么问题出在哪里呢？创建新组件，它将d数组中的新选项。“我的”按钮需要添加新选项，而不是添加到可用选项列表中，而是添加到已选择的
选项列表中。
handleClick
不应该添加新选项到选项列表中。它应该添加到已选择的
选项中。@JacekWojcik您应该在中演示您的案例更多详细信息，codesandbox可能请参考
handleClick2
@JacekWojcik请检查我在回答中的沙盒链接
handleClick
不应该将新选项添加到选项列表中。它应该将选项添加到已选择的
选项中。@JacekWojcik您应该更详细地演示您的案例，codesandbox maybe请参考
handleClick2
@JacekWojcik请检查我的沙盒链接以回答问题
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;