react antd阻止Checkbox事件冒泡（折叠面板标题中增加复选框，阻止点击复选框折叠面板展开/折叠）

最新推荐文章于 2024-06-20 14:02:48 发布

a堅強的泡沫

最新推荐文章于 2024-06-20 14:02:48 发布

阅读量1.6k

点赞数

文章标签： react.js javascript

本文链接：https://blog.csdn.net/weixin_43973415/article/details/131413013

版权

背景

折叠面板Collapse标题中增加复选框，点击复选框，会触发折叠面板的展开和折叠。

我们希望勾选复选框的时候，不能影响到折叠面板的展开和折叠。

最开始使用onChange自带的event来阻止事件冒泡，这种方式是无效的，代码如下：

<Checkbox
  style={{ marginRight: 5 }}
  onChange={(e) => {
    console.log('e:', e); // 虽然这里的event也具有stopPropagation方法
    e.stopPropagation(); // 这种方式是无效的
    handleClickItemCheckbox(isChecked, item.task_record_id);
  }}
  checked={isChecked}
/>

在这里插入图片描述

解决

监听复选框的onClick事件，用e.stopPropagation()阻止事件冒泡。

<Checkbox
  style={{ marginRight: 5 }}
  onChange={handleClickItemCheckbox(isChecked, item.task_record_id)}
  checked={isChecked}
  onClick={(e) => e.stopPropagation()} // 在这里
/>