Estoy trabajando en una aplicación que usa eventos onkeyup y onclick. onkeyup funciona como se esperaba, sin embargo, onclick no funciona como se esperaba. Vea el código a continuación...

 //the state const [currentGuess, setCurrentGuess] = useState(""); //the callback function const handleKeyup = (e) => { let pressedKey = ""; if (typeof e == "string") { pressedKey = e; } const checkPressedKey = pressedKey ? pressedKey : e.key; setCurrentGuess((prev) => prev + checkPressedKey); console.log(currentGuess.length); } //triggering callback when user types on keyboard useEffect(() => { window.addEventListener("keyup", handleKeyup); return () => window.removeEventListener("keyup", handleKeyup); }, [handleKeyup]); //trigger the callback when user types in the fake keyboard useEffect(() => { setKeyOnClick(); }, []); function setKeyOnClick() { const allkey = document.querySelectorAll(".key"); allkey.forEach((btnKey) => { btnKey.addEventListener("click", function () { handleKeyup(btnKey.dataset.key); }); }); } ***for onKeyup** output: 0, 1, 2, 3, 4 .... ***for onclick** output: 0 (it doesn't increase);

-HTML-

 <button className="key" data-key="Q">Q</button> <button className="key" data-key="W">W</button> <button className="key" data-key="E">E</button> <button className="key" data-key="R">R</button> <button className="key" data-key="T">T</button> <button className="key" data-key="Y">Y</button>

Como puede ver arriba, tengo que pasar la clave del conjunto de datos en la función handlekeyup para el evento onclick.