如何正确解决我的承诺（React）

Question

当我点击一些“ficha”时，承诺已正确完成，但是当我点击 DOM 中的其他一些元素时，我的事件并未最终完成。 我希望当我单击令牌以外的任何内容时，承诺就会结束。 我该如何解决这个问题？

代码：

import React from "react";
import { CardMovUser } from "../components/Cards/CardMovement";

const CardMovementContainer = ({
  movement,
  index,
  selectedCard,
  waitingForEvent,
  onCardClick,
  onEventComplete,
  isMyTurn
}) => {

  const handleClick = () => {
    if (!isMyTurn) return; 

    console.log("Clicked card", index);
    onCardClick(index);

    // Solo iniciar el evento de espera si `waitingForEvent` no está activo.
    if (!waitingForEvent) {
      waitForEvent("click", "[data-ficha-id]").then(() => {
        console.log("Ficha clicked OAAAAAAA");
        onEventComplete();
      });
    }
  };

  const waitForEvent = (eventType, selector) => {
    return new Promise((resolve) => {
      const handler = (event) => {
        console.log("Evento detectado en:", event.target); 
        const fichaElement = event.target.closest(selector);  selector
  
        if (fichaElement) {
          console.log("Ficha seleccionada: ", fichaElement); 
          document.removeEventListener(eventType, handler); 
          console.log("Evento removido");
          resolve();
        } 
      };
  
      console.log(`Añadiendo listener para ${eventType} en elementos que coincidan con ${selector}`);
      document.addEventListener(eventType, handler);
    });
  };

  return (
    <CardMovUser
      img_url={movement.movimiento.img_url}
      movetype={movement.movimiento.movement}
      handleClick={handleClick}
      clicked={selectedCard === index}
    />
  );
};

export default CardMovementContainer;

我正在尝试添加一个 else 语句，但是当我单击触发事件和承诺的卡片时，当它检测到我单击了不是“ficha”的内容时，它会自动结束承诺。

Answer 1

我希望当我单击令牌以外的任何内容时，承诺就结束

然后不要等待目标上与特定选择器匹配的第一个事件，只需全面等待第一个点击事件，然后决定它是否与您的目标匹配。

const handleClick = async () => {
  …
  const event = await waitForFirstEvent("click");
  if (event.target.closest("[data-ficha-id]")) {
    console.log("Ficha clicked OAAAAAAA");
  } else {
    console.log("Something else clicked");
  }
  onEventComplete();
};

const waitForFirstEvent = (eventType) => {
  return new Promise(resolve => {
    document.addEventListener(eventType, resole, { once: true });
  });
};