如何停止执行通过使用 ReactJS 中的另一个按钮单击按钮触发的功能？

Question

我有一个 ReactJS 应用程序，其中 buttonA 是运行函数 onClick，并且该函数内部有一个 for 循环。我想打破另一个函数的 for 循环 onclick。这两个按钮的可见性是使用 states 控制的。每当我们单击 roll dice btn 时，它都会隐藏自己并显示 stop bet btn 并且 stop bet btn 应该 onclick 停止执行在 Roll dice 的 onclick 中声明的 runbets 函数。我想要与 Primedice.com 相同的功能。

       const [stopBet, setStopBet] = useState(false);// this is the state declaration for reference
     <button
          type="button"
          className={`text-md font-bold bg-btn1 text-white px-28 py-3 rounded ${
            disableClick && "hidden"
          }`}
          id="rollBtn"
          onClick={() => {
            const runBets = () => {

              for (let i = 0; i < 10; i++) {
                if (stopBet) {
                  console.log("enable click");
                  document
                    .getElementById("rollBtn")
                    .removeAttribute("disabled");
                  setDisableClick(false);
                  setStopBet(false);
                  break;
                }
                
              }
            };
            // To prevent spamming of bets
            setDisableClick(true);
            console.log("disable click");
            document
              .getElementById("rollBtn")
              .setAttribute("disabled", "true");
            runBets();
          }}>
          Roll Dice
        </button>
        <button
          type="button"
          className={`text-md font-bold bg-btn1 text-white px-28 py-3 rounded ${
            !disableClick && "hidden"
          }`}
          id="rollBtn"
          onClick={() => {
            setStopBet(() => {
              console.log("stop bet");
              return true;
            });
          }}>
          Stop Bet
        </button>

Answer 1

如果您使用 useState，则会出现问题，状态更新和组件重新呈现时会出现延迟。与此同时，循环可以继续，这是你不希望的。

我建议你用 useRef 试试这个，它不会重新渲染整个组件并完成你的工作。

const bool = useRef(false);  // Replace the useState line with this.

onClick(() => bool.current = true); // Replace the stop logic with this.

if (bool.current) // Replace the if condition with this.
break;

我还建议，对于某些问题，您可以在沙盒中克隆您想要的内容，这样更容易真正看到您想要的内容或 UI 中正在发生的事情。

Answer 2

我认为你应该在这里使用 useMemo 而不是 useState，因为你不想在组件重新渲染时更改数据

如何停止执行通过使用 ReactJS 中的另一个按钮单击按钮触发的功能？

How to stop execution of a function which is triggered by a button click using another button in ReactJS?

javascript

reactjs

loops

onclick

onclicklistener