El problema: tengo una selección de 3 botones de opción y necesito permitir que los usuarios anulen la selección de un botón de opción que hayan seleccionado previamente haciendo clic en él (alternar el estado según la selección del usuario del botón de opción). Agregar un botón "ninguno" o "borrar selecciones" no es una opción. Por lo tanto, deben ser botones de radio que permitan anular la selección o casillas de verificación que permitan solo 1 selección.
¿Cómo demonios hago esto para reaccionar limpiamente? Semi-limpio?
Descargos de responsabilidad:
Mhm, esta solución no es muy buena, pero puedes hacer lo siguiente:
onChange -> simplemente cambia el estadoonClick -> verifique si el valor es el que ya tiene en el estado. Si es así, establezca el estado en nulo.Mira este CodeSandbox
O bien, puede usar una casilla de verificación y mantener siempre 1 elemento en estado a la vez. Y una vez que se haga clic nuevamente, simplemente borre el estado.
import React from 'react' const ExclusiveCheckBoxes = (props) => { const allUnchecked = {option1:false, option2:false, option3:false}; const [options, setOptions] = React.useState(allUnchecked); const chkChanged = e => { setOptions({...allUnchecked, [e.target.name]: e.target.checked}); } return ( <div> <h1>ExclusiveCheckBoxes</h1> <input type="checkbox" name="option1" checked={options.option1} onChange={chkChanged}/> <input type="checkbox" name="option2" checked={options.option2} onChange={chkChanged}/> <input type="checkbox" name="option3" checked={options.option3} onChange={chkChanged}/> </div> ) } export default ExclusiveCheckBoxes