Estoy tratando de cambiar la clase de un botón en reaccionar js al hacer clic usando ganchos. El problema es que cuando la alternancia de clase ocurre a través de un cambio de estado, se ve el resultado de la alternancia de clase, pero la página se vuelve a representar, representando la clase inicial (no la que se alterna). Por favor ayuda
Botones
<button className={buttonColor1?styles.priceButtonWhite:styles.priceButtonGreen} onClick={() => changeColor(1)}>100</button> <button className={buttonColor2?styles.priceButtonWhite:styles.priceButtonGreen} onClick={() => changeColor(2)}>200</button> <button className={buttonColor3?styles.priceButtonWhite:styles.priceButtonGreen} onClick={() => changeColor(3)}>300</button>Función de cambio de color
const changeColor = (n) => { if (n==1){ setButtonColor1(!buttonColor1); } else if (n==2){ setButtonColor2(!buttonColor2); } else{ setButtonColor3(!buttonColor3 ); } }Manos
const [buttonColor1, setButtonColor1] = useState(true); const [buttonColor2, setButtonColor2] = useState(true); const [buttonColor3, setButtonColor3] = useState(true);SCSS
.priceButton{ border-radius: 10px; padding: 10px; border: none; } .priceButtonWhite{ @extend .priceButton; background: white; border: 1px solid #166C6C; } .priceButtonGreen{ @extend .priceButton; background: #166C6C; }Al hacer clic en el botón, la clase cambia a priceButtonGreen, luego la página completa se vuelve a renderizar dejando la clase priceButtonWhite en los botones.
Creé un ejemplo de trabajo aquí: https://codesandbox.io/s/suspicious-curie-90t4c?file=/src/App.js
Dado que falta el objeto de estilo en su ejemplo, es difícil ver cuál es el error en su código.
function Toggler() { const [buttonColor1, setButtonColor1] = useState(true); const [buttonColor2, setButtonColor2] = useState(true); const [buttonColor3, setButtonColor3] = useState(true); return ( <div> <button className={`priceButton ${ buttonColor1 ? "priceButtonWhite" : "priceButtonGreen" }`} onClick={() => setButtonColor1(!buttonColor1)} > 100 </button> <button className={`priceButton ${ buttonColor2 ? "priceButtonWhite" : "priceButtonGreen" }`} onClick={() => setButtonColor2(!buttonColor2)} > 200 </button> <button className={`priceButton ${ buttonColor3 ? "priceButtonWhite" : "priceButtonGreen" }`} onClick={() => setButtonColor3(!buttonColor3)} > 300 </button> </div> ); } .priceButton { border-radius: 10px; padding: 10px; border: none; } .priceButtonWhite { background: white; border: 1px solid #166c6c; } .priceButtonGreen { background: #166c6c; }Dentro de la estructura que propuso, esta es una solución funcional.
Cuando tiene un elemento de button dentro del elemento de form , hacer clic en un botón hará que la página se vuelva a cargar (el elemento de button tiene el atributo de type configurado para submit de forma predeterminada).
Puede cambiar el type de un botón a button o usar event.preventDefault() en el detector de botones .