Estoy usando reaccionar con mecanografiado. Creé un botón y ahora quiero cambiarlo para invertir su texto en el evento onClick para eso estoy usando useState para cambiar el texto del botón, para la inversión de texto, creo una bandera booleana.
Si hago clic en el botón primero, funciona perfectamente y cuando hago clic nuevamente. No funcionará en el primer clic.
const Panel = () => { let flag: boolean = false; const [btnText, setBtnText] = useState("hello!"); const changeBtnText = () => { if(!playButtonFlag){ setBtnText("How are you!"); flag = true; } else{ setBtnText("hello!"); flag = false; } } return <div> <Button name={btnText} onClick={changeBtnText}/> </div>; };El error puede estar en la variable que está utilizando para verificar, es decir, playButtonFlag . Es mejor usarlo a través del estado: React no se vuelve a procesar cuando se cambia el valor de una variable común.
Un poco de ayuda para usted usando un ejemplo a continuación:
import React, {useState} from "react"; export default function App() { const [btnText, setBtnText] = useState("hello!"); const [flag, setFlag] = useState(false); const changeBtnText = () => { if(!flag) setBtnText("How are you!"); else setBtnText("hello!"); setFlag(!flag); } return <div> <button value={btnText} onClick={changeBtnText}>{btnText}</button> </div>; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Tu bandera let flag: boolean = false; la variable se reinicializará con false después de volver a renderizar. Existe la posibilidad de que playButtonFlag sea el problema. Es mejor mantener un estado, si realmente desea que esa flag genere cambios.
const Panel = () => { const [btnText, setBtnText] = useState("hello!"); const [flag,setFlag] = useState(false); const changeBtnText = () => { setBtnText(!flag ? "How are you!" : "hello!"); setFlag(currentFlag => !currentFlag) } return ( <div> <Button name={btnText} onClick={changeBtnText} /> </div> ); };o puede establecer el texto del botón en función del texto actual del botón
const Panel = () => { const [btnText, setBtnText] = useState("hello!"); const changeBtnText = () => { setBtnText(btnText === "hello!" ? "How are you!" : "hello!"); } return ( <div> <Button name={btnText} onClick={changeBtnText} /> </div> ); };Puedes hacerlo con objeto de una forma sencilla.
import { useState } from "react"; import "./styles.css"; const BUTTON_TEXT = { "hello!": "How are you!", "How are you!": "hello!" }; const Panel = () => { const [btnText, setBtnText] = useState("hello!"); const changeBtnText = () => { setBtnText(BUTTON_TEXT[btnText]); }; return ( <div> <button name={btnText} onClick={changeBtnText}> {btnText} </button> </div> ); }; export default function App() { return ( <div className="App"> <Panel /> </div> ); }