我有一個 ReactJS 應用程式，其中一個 buttonA 正在運行一個函式 onClick 并且該函式內部有一個 for 回圈。我想打破另一個函式的 for 回圈 onclick 。使用 states 控制兩個按鈕的可見性。每當我們單擊擲骰子 btn 時，它將隱藏自身并顯示停止投注 btn 和停止投注 btn 應 onclick 停止執行在擲骰子的 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>
uj5u.com熱心網友回復：
如果您使用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 中正在發生的事情。
uj5u.com熱心網友回復：
我認為您應該在這里使用 useMemo 而不是 useState，因為您不想在重新渲染組件時更改資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/411457.html
標籤：