React自定义Tile组件点击复选框无响应 其余区域可正常切换状态

问题根因 #

点击复选框时事件会向上冒泡，先后触发两次状态翻转：首先触发复选框自身的onChange翻转一次selected，随后父级div的onClick被触发，又把selected翻回原值，所以看起来点击复选框没有反应。

修复方案 #

两种可行方案都可以满足整个Tile区域可点击的需求：

方案1：阻止事件冒泡 #

给复选框添加点击事件拦截冒泡，避免父级重复处理点击：

const Tile = ({ title }) => {
  const [selected, setSelected] = useState(false);
  useEffect(()=>{
    console.log(selected)
  },[selected])
  return (
    <>
      <div className="tile" onClick={ev=>setSelected(curr=>!curr)}>
        <label>{title}</label>
        <input
          type="checkbox"
          checked={!!selected}
          onChange={ev=>{setSelected(curr=>!curr)}}
          onClick={e => e.stopPropagation()}
        />
      </div>
    </>
  );
};

方案2：统一交给父级处理（更简洁） #

直接让复选框不响应鼠标事件，所有区域的点击都由父级div统一处理，不需要额外写事件拦截逻辑：

1. 调整组件代码，移除复选框的onChange属性：

<input
  type="checkbox"
  checked={!!selected}
/>

2. 在CSS中给复选框添加pointer-events: none属性：

.tile input[type="checkbox"] {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

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