如何在 react-select 中添加多个选择选项值答案

【问题标题】：How can I add multiple select option value in react-select如何在 react-select 中添加多个选择选项值
【发布时间】：2021-08-17 00:08:52
【问题描述】：

我正在尝试创建让用户可以在 react-select 中选择多个选项的功能。

这是onChange function 的以下代码：

const [searchUsers, setSearchUsers] = useState(false);
const [searchTeams, setSearchTeams] = useState(false);
const [searchOrganizations, setSearchOrganizations] = useState(false);

  const find = (value) => {
    value.forEach((option) => {
      if (option.value === "Users" && value.length === 1) {
        setSearchUsers(true);
        setSearchTeams(false);
        setSearchOrganizations(false);
      } else if (option.value === "Teams" && value.length === 1) {
        setSearchUsers(false);
        setSearchTeams(true);
        setSearchOrganizations(false);
      } else if (option.value === "Organizations" && value.length === 1) {
        setSearchUsers(false);
        setSearchTeams(false);
        setSearchOrganizations(true);
      } else {
        setSearchUsers(false);
        setSearchTeams(false);
        setSearchOrganizations(false);
      }
    });
  };

  const findList = [
    { value: "Users", label: "Users" },
    { value: "Teams", label: "Teams" },
    { value: "Organizations", label: "Organizations" },
  ];

  const searchData = [];
  findList.forEach((item) =>
    searchData.push({ label: item.label, value: item.value })
  );

这是我的选择标签：

  <Select
    className="search-select"
    styles={customStyles}
    instanceId="long-value-select"
    closeMenuOnSelect={false}
    components={animatedComponents}
    defaultValue="Select"
    isMulti
    onChange={find}
    options={searchData}
    theme={(theme) => ({
      ...theme,
      colors: {
        ...theme.colors,
        neutral50: "#fff",
      },
    })}
  />

我的 onChange 函数现在一次只能获取一个选项值。如何使它具有多个选项值？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

如果你想从多个选定的选项更新状态，你必须重写你的 find 函数：

 const find = (value) => {
    setSearchUsers(value.some((element) => element.value === "Users"));
    setSearchTeams(value.some((element) => element.value === "Teams"));
    setSearchOrganizations(value.some((element) => element.value === "Organizations")
    );
  };

仅供参考 - Array.prototype.some()

some() 方法测试数组中是否至少有一个元素通过提供的函数实现的测试

【讨论】：