Tengo un botón de alternar al que quiero agregar mi propio estilo, quiero que el botón cambie de color cuando se haya seleccionado, pero el problema con el código actual es que cuando se presiona el botón, el color cambia al resultado deseado pero como tan pronto como suelto mi clic, el color del botón vuelve a su estilo predeterminado. ¿Alguien puede ayudarme con esto?
Mi componente React
import React, { useState } from 'react'; import ToggleButton from 'react-bootstrap/ToggleButton'; import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup'; import '../styles/components/_LoanType.scss'; const LoanType:React.VFC = () => { const [selectedButton, setSelectedButtonValue] = useState<string>('fixedRateLoan'); const handleChange = (value:string) => { selectedButton(value); } return ( <div className="loan-type"> <ToggleButtonGroup type="radio" name="radio" value={selectedButton} onChange={handleChange} > <ToggleButton value={'frl'}>1</ToggleButton> <ToggleButton value={'vrl'}>2</ToggleButton> <ToggleButton value={'spl'}>3</ToggleButton> </ToggleButtonGroup> </div> ); } export default LoanType;Mi archivo scss:
.pkg .calc { .ci .lts{ .loan-type { .btn-group{ display: flex; .btn-primary{ text-align: center; background-color: #ffffff; color: #656565; font-weight: 900; &:active{ color: #ffffff; background-color: #656565; } } } } }}
En primer lugar, hay algunos errores en su componente.
En el controlador de cambios, está llamando al estado actual como una función, en lugar de la función que actualiza el estado.
const handleChange = (value:string) => { selectedButton(value); }Debiera ser
const handleChange = (value:string) => { setSelectedButtonValue(value); } En segundo lugar , la documentación para <ToggleButton> establece que se requiere una identificación para hacer clic en el botón para alternar la entrada. Entonces deberías agregar esto a los botones, por ejemplo
<ToggleButton id="frl" value={"frl"}> 1 </ToggleButton> <ToggleButton id="vrl" value={"vrl"}> 2 </ToggleButton> <ToggleButton id="spl" value={"spl"}> 3 </ToggleButton>También está inicializando el estado con un valor que no es una opción. ¿Quizás esto debería establecerse en frl, vrl o spl?
useState<string>('frl');¡Espero que esto ayude!