У меня есть компонент карты следующим образом
<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
карты, есть ли способ ограничить обратный вызов самым низким уровнем?