javascript - 防止事件冒泡 dom 树
问题描述
我有一个卡片组件如下
<div
onClick={e => {
console.log("DEMAND CARD CLICKED");
if (isSelectionActive) {
setSelected();
}
}}
>
<DemandCardFooter
demandId={id}
totalBooked={totalBooked}
totalDemand={totalDemand}
/>
</div>
这<DemandCardFooter/>
看起来像:
<div className="vt-card-footer d-flex justify-content-between align-items-baseline px-3">
<DemandSelector demandId={demandId} />
<p className="lead font-weight-bold mb-0">
<span className="text-success">{totalBooked}</span> / {totalDemand}{" "}
<small className="text-muted font-weight-normal">Units.</small>
</p>
</div>
最后是<DemandSelector/>
这样的:
const DemandSelector = ({ demandId }) => {
const [isChecked, setChecked] = useRowSelector({
path: "demands",
payload: { id: demandId }
});
return (
<Checkbox
checked={isChecked ? true : false}
onClick={e => {
console.log("CHECKBOX CLICKED");
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
setChecked();
}}
/>
);
};
我的问题是当我单击复选框时,复选框onClick
和卡片onClick
都被触发,有什么办法可以将回调限制在最低级别?
解决方案
一段时间后想通了。解决方案是放入stopPropogation()
DOM 元素封装<DemandSelector/>
所以这段代码有效
<div
className="vt-card-footer d-flex justify-content-between align-items-baseline px-3"
onClick={e => {
e.stopPropagation();
}}
>
<DemandSelector demandId={demandId} />
<p className="lead font-weight-bold mb-0">
<span className="text-success">{totalBooked}</span> / {totalDemand}{" "}
<small className="text-muted font-weight-normal">Units.</small>
</p>
</div>
也别忘了把它一路放下
const DemandSelector = ({ demandId }) => {
const [isChecked, setChecked] = useRowSelector({
path: "demands",
payload: { id: demandId }
});
return (
<Checkbox
checked={isChecked ? true : false}
onClick={e => {
e.stopPropagation();
setChecked();
}}
/>
);
};
推荐阅读
- flutter - 扩展RouterDelegate的子类的build方法在Flutter中App的状态改变时不会重建
- kubernetes - 在 Kubernetes 中创建两个容器 pod
- c++ - C++ 中的 while(pointer!=NULL && pointer->next!=NULL) 与 while(pointer->next!=NULL && pointer!=NULL)
- python - 为什么这个回文递归函数在所有情况下都给我 True?
- node.js - 无法正确安装 ot.js
- python - jpeg/png 图像插入错误 - python-docx
- docker - docker build failed(失败的前提条件)
- plotly-dash - Dash 客户端回调与 dcc.store
- react-native - 如何在 ListView 中“自动突出显示”项目
- excel - 如何从两个科目都失败的同一张 Excel 表中提取姓名