Предотвратите случайное всплески

Question

У меня есть компонент карты следующим образом

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

Answer 1

Разобрался через некоторое время. Решение состояло в том, чтобы поместить 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();
      }}
    />
  );
};

Answer 2

Проблема не в пузырях событий, а в фазе захвата событий.

Событие перестает всплывать с e.stopPropagation();, который вы используете в своем коде. Но захват события не предотвращается в родительском событии.

Вы можете предотвратить это, добавив e.stopPropagation(); в родительское событие.

<div
      onClick={e => {
         e.stopPropagation();
        console.log("DEMAND CARD CLICKED");
        if (isSelectionActive) {
          setSelected();
        }
      }}
    >
      <DemandCardFooter
        demandId={id}
        totalBooked={totalBooked}
        totalDemand={totalDemand}
      />
    </div>