从复选框组中获取值并从数组中添加/删除它们

Question

我正在创建一个包含一组复选框的表单。

当点击复选框时，我会获取该特定复选框的值并添加到一个数组（我正在使用 useState 挂钩），如果我取消选中它将从数组中删除该元素。

到目前为止，这是我的代码：

const ContactUs = () => {
  const [cities, setCities] = useState([])

  useEffect(() => {
    console.log(cities)
  })

  const handleCheck = (e) => {
    if (e.target.checked) {
      setCities([...cities, e.target.value])
    } else {
      removeCities()
    }
  }

  const removeCities = () => {
    setCities(() => cities.splice(DT.length - 1, 1))
  }

  return (
    <Content>
      <form>
        <SectionTitle>Day Tours</SectionTitle>

        <Checkbox
          type="checkbox"
          id="1"
          label="Dublin"
          value="dublin"
          name="dublin"
          onChange={handleCheck}
        />
        <Checkbox
          type="checkbox"
          id="2"
          label="New York"
          value="New York"
          name="new-york"
          onChange={handleCheck}
        />
        <Checkbox
          type="checkbox"
          id="3"
          label="Torino"
          value="Torino"
          name="torino"
          onChange={handleCheck}
        />
      </form>
    </Content>
  )
}

我可以将它添加到数组中，但我似乎无法删除它（或删除正确的）。

我尝试了拼接和切片方法，但我没有完全掌握它们的概念。

Answer 1

我不知道 DT 是什么，因为您还没有共享您的整个代码，但我认为您可以通过另一种仍然有效的声明方式来解决这个问题：

过滤掉数组，使其返回所有被检查的内容并过滤（删除）未检查的内容：

在你的 else 块中：

setCities(cities.filter(city => city !== e.target.value))

Filter 将始终返回一个新数组，其值与过滤条件匹配，在这种情况下，它将返回除 e.target.value 之外的所有内容，这是我们根据您的逻辑想要的，else 块将在执行时执行未选中。