请问将select 改成多选,当只选中一项时，无法取消选中，是什么原因呢?

Question

请问将课程中的select 改成多选,当只选中一项时，无法取消选中，是什么原因呢?

我是这样写的

function Select() {
  const [selectList, setSelectList] = useState<string[]>(['北京'])
  function handleChange(e: ChangeEvent<HTMLSelectElement>) {
    if (selectList.includes(e.target.value)) {
      setSelectList(selectList.filter(item => item !== e.target.value))
    } else {
      setSelectList([...selectList, e.target.value])
    }
  }
  return (
    <div>
      <select
        onChange={e => handleChange(e)}
        value={selectList}
        multiple
      >
        <option>北京</option>
        <option>上海</option>
        <option>杭州</option>
        <option>深圳</option>
      </select>
    </div>
  )
}

当只选中 北京 时，点击 北京 无法取消，点击没有触发 onChange 事件

Answer 1

Etcetera 2023-03-24 01:16:38

只有一个被选中时你点击那个元素是不会触发ChangeEvent的

• 提问者 flask #1

  大佬有什么办法可以解决吗

• Etcetera 回复 提问者 flask #2

  比如单独写个清空按钮，重新set空数组。但是一般实际网站很多多选框好像也不会有你现在的取消最后单个option。不过我觉得有个思路就是类似于消息弹窗那种，你封装个Select选项栏有确认取消按钮的，点击取消就是回退到默认数据的选择

• 提问者 flask 回复 Etcetera #3

  大佬还是没解决我问的问题哦（如何点击取消单个选中）。还有您看下 antd， 是可以取消的

点开查看后面2条评论