点击父元素时首个Checkbox自动切换状态问题求助

问题根源 #

你的MultiSelect组件根元素使用了<label>标签，而<label>的默认浏览器行为是：点击它时会自动激活内部关联的第一个表单元素。你的第一个Checkbox组件内的<input type="checkbox">恰好是外层<label>内的首个表单元素，因此点击"Select nations"区域时，浏览器会触发这个checkbox的change事件，导致其选中状态自动切换。

修复方案 #

将MultiSelect组件的外层<label className="multiselect">替换为<div className="multiselect">——此处仅需容器功能，无需<label>的表单关联特性。

修复后的MultiSelect代码 #

const MultiSelect = ({defaultTitle, options}) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="multiselect">
      <div className="wrapper open">
        <div className="selected" onClick={() => setIsOpen(!isOpen)}>
          <div className="truncated" data-value={defaultTitle}></div>
        </div>
        <div className="options">
          {options.map(option => <Checkbox key={option.id} label={option.value}/>)}
        </div>
      </div>
    </div>
  )
}

效果验证 #

修改后，点击"Select nations"区域仅会触发下拉的展开/收起逻辑，第一个checkbox的选中状态仅在点击自身区域时才会切换，符合预期交互。

内容的提问来源于stack exchange，提问作者EzioMercer