0
95
Vistas¿Cómo manipular conjuntos de botones en React con UseStates?
Hola, soy nuevo en reaccionar y trato de hacer que los botones se iluminen cuando los presiona, sin embargo, están en conjuntos de botones y me gustaría que los otros botones del conjunto no se iluminen también cuando se presiona uno.
Actualmente utilicé UseState() y simplemente activa y desactiva todos los botones. ¿Cuál es la mejor práctica para solucionar esto? Porque crear 30 funciones de botones individuales no parece práctico. 
const [ticket, setTicket]=useState(false) const ticketHandler = () => { setTicket (!ticket); } <button onClick={ticketHandler} className={`${ticket? 'is-success': ''} button`}>1-5</button> <button onClick={ticketHandler} className={`${ticket? 'is-success': ''} button`}>6-9</button>en este ejemplo, tanto el ticket '1-5' como el ticket '6-9' se iluminan en verde
3 Respuestas
Responde la pregunta0
Debe crear un componente de Button separado y mantener la lógica de iluminación en él. Eso resolverá tu problema.
const Button = ({ buttonText }) => { const [ticket, setTicket] = useState(false); const ticketHandler = () => { setTicket(!ticket); }; return ( <button onClick={ticketHandler} className={`${ticket ? "is-success" : ""} button`} > {buttonText} </button> ); };Y crea botones como este:
<Button buttonText="1-5"/> <Button buttonText="6-9"/>0
Solo necesita almacenar un valor que podría usar en el estado (utilicé '1-5') y luego verifique eso.
function RadioButtonGroup() { const [active, setActive] = useState(''); const handleClick = (value) => () => { setActive(value); }; return ( <div> <button className={`${active === '1-5' ? 'is-active' : ''}`} onClick={handleClick('1-5')} > 1-5 </button> <button className={`${active === '6-9' ? 'is-active' : ''}`} onClick={handleClick('6-9')} > 6-9 </button> </div> ); }0
Sugeriría dar un valor a su botón y pasarlo a su controlador.
Y asigne el valor al ticket en lugar de hacer que el ticket sea booleano
Asi que,
const ticketHandler = (element) => { setTicket(element.value); }; const getClass = (condition) => ticket === condition ? 'is-success': ''Botón:
<button onClick={ticketHandler} value ="oneToFive" className={`${getClass("oneToFive")} button`}>1-5</button> <button onClick={ticketHandler} value="sixToNine" className={`${getClass("sixToNine")} button`}>6-9</button>