Question

我正在使用包含一堆选项的 React Select (https://react-select.com/home)，onChange 处理程序将识别所选项目并将其推送到状态数组中。

我遇到的问题是如何从 State 数组中删除未选择的项目：

import Select from 'react-select'

const [selectedTeams, setSelectedTeams] = useState([]);

function manageSelectedTeams(event) {
    console.log('function triggered')
    setSelectedTeams([])

    event.forEach((team) => {
      console.log(team.value)
      setSelectedTeams(() => [...selectedTeams, team.value])
    })
}

data = [
    {
        label: "Example"
        value: "example"
    },
    {
        label: "Example"
        value: "example"
    },
    {
        label: "Example"
        value: "example"
    },
]

return (
<Select isMulti options={data} onChange={(e) => manageSelectedTeams(e)} closeMenuOnSelect={false} placeholder={"Teams will auto populate here once Location is defined above"} />
)

当特定选项未选中/未选中时，我将如何处理从 selectedTeams 中删除项目

TIA

Answer 1

react-select 为您处理插入和删除操作，因此无需为其创建单独的逻辑。当我们使用 onChange 时，所选对象的数组可能是一个可能的参数。您可以参考文档中的相同内容。 https://react-select.com/props

因此您需要按如下方式更新您的代码：


  function manageSelectedTeams(data) {
    let finalValueList = data.map((item) => item.value);
    console.log(finalValueList);
    setSelectedTeams(finalValueList);
  }

  return (
    <Select
      isMulti
      options={data}
      onChange={manageSelectedTeams} //UPDATED
      closeMenuOnSelect={false}
      placeholder={
        "Teams will auto populate here once Location is defined above"
      }
    />
  );

反应选择无法从状态数组中删除项目

1 个答案: