Tengo un formulario en el que tengo avRadioButton .
Cuando hago clic en uno de estos radioButton de radio, guardo el valor "S" o "N". Pero cuando hago clic en resetForm , el valor se establece en una cadena vacía, pero el botón de opción permanece marcado (por lo que si hago clic en enviar formulario en otro momento, se toma el valor de radioButton )
const [formModel, setFormModel] = useState({ //... other fields perFlgattivo: '', }); const handleFormReset = e => { setFormModel({ //... other fields perFlgattivo: '', }); } const handleChangeRadio = e => { const { name, value } = e.target; console.log("e.target ", e.target) setFormModel(prevState => ({ ...prevState, [name]: value, })); };y este es mi radioButton en la forma:
<AvRadioGroup name="perFlgattivo" inline> <Label id="perFlgattivo">Active</Trans> </Label> <br></br> <AvRadio id="perFlgattivo" name="perFlgattivo" data-cy="perFlgattivo" label="Si" value="S" onChange={handleChangeRadio} checked={formModel.perFlgattivo} /> <AvRadio id="perFlgattivo" name="perFlgattivo" data-cy="perFlgattivo" label="No" value="N" onChange={handleChangeRadio} checked={formModel.perFlgattivo} /> </AvRadioGroup> Entonces, mi problema es cuando intento borrar el valor, porque incluso si formModel.perFlgattivo da como resultado una cadena vacía, el valor en el formulario permanece marcado
Esta es una solución muy grosera, checked={formModel.perFlgattivo.length > 0} seguramente resolverá su problema.
Pero, en general, los botones de radio deben tener valores boolean en el campo de valor. Intente cambiar el valor predeterminado de perFlgattivo a false y lo mismo al restablecer el formulario.