Creé un formulario con un botón de opción y realicé la validación con el formulario de gancho de reacción, pero al mostrar los datos de registro en la consola, siempre se muestra "encendido" en el botón de opción de selección.
<div className=""> <label htmlFor="" className=" "> US Citizen? </label> <div className=""> <div className="radio-container"> <input type="radio" name="radio" {...register("usCitizen")} /> <label>Yes</label> </div> <div className="radio-container"> <input type="radio" name="radio" {...register("usCitizen")} /> <label>No</label> </div> </div> </div>Utilice el tipo de entrada de envío. (manejarEnviar)
<form onSubmit={handleSubmit(onSubmit)}> <div className=""> <label htmlFor="" className=" ">US Citizen?</label> <div className=""> <div className="radio-container"> <input type="radio" name="radio" value="yes" {...register("usCitizen")} /> <label>Yes</label> </div> <div className="radio-container"> <input type="radio" name="radio" value="no" {...register("usCitizen")} /> <label>No</label> </div> </div> </div> <input type="submit" value="Submit" /> </form>Creo que necesita agregar una función que maneje el evento onclick y también agregar un estado de uso que pueda establecer el valor en verdadero o falso. No estoy seguro acerca de la sintaxis, pero es más o menos así:
const [radio, setRadio] = useState(false); function handleClick(event){ const [val] = event.target.value; setRadio(()=>{ if (val === true){ return(false) } else{ return(true) } } } <input type="radio" onclick={handleClick} value={radio}>