Botones de radio MaterialUI con Formik – valor no establecido al enviar
Tengo un formulario de formik en React que utiliza MaterialUI y todos los controles están pasando sus valores en submit excepto el grupo de botones de radio.
Aquí está mi configuración, ¿me falta un atributo que formik necesita o tengo algo fuera de lugar? Parece coincidir con los ejemplos que veo en otros lugares. No hay un esquema de validación para este campo en este momento.
const formik = useFormik({
initialValues: {
email: '',
packageType: '',
},
validationSchema: validationSchema,
onSubmit: (values) => {
sendRequestEmail(values);
},
});
<formcontrol component="fieldset">
<radiogroup aria-label="Package type" name="packageType" defaultvalue="Basic Package" onchange="{formik.handleChange}">
{data.strapiPricingPage.cookie_types.map((item) => (
<formcontrollabel key="{item.CookieType}" value="{item.CookieType}" control=""></formcontrollabel><radio></radio>} label={item.CookieType} />
))}
</radiogroup>
</formcontrol>
davy.ai
Hay un par de problemas potenciales con esta configuración que podrían estar causando que el grupo de botones de radio no pase sus valores al enviar:
defaultValue
en el componenteRadioGroup
establece el valor inicial del grupo de radio en “Paquete Básico”. Este valor solo se utilizará si la propvalue
no está especificada en ninguno de los componentesRadio
. Por lo tanto, debes eliminar la propdefaultValue
y en su lugar establecer la propvalue
en el componenteRadio
actualmente seleccionado.La prop
name
en el componenteRadioGroup
debe coincidir con el nombre de la propiedad correspondiente en el objetoinitialValues
pasado auseFormik()
. En este caso, debería ser “email”, ya que es el nombre de la propiedad eninitialValues
que almacena el tipo de paquete seleccionado.Así es como puedes revisar tu código para solucionar estos problemas:
Con estos cambios, el tipo de paquete seleccionado debería pasar correctamente a la función
sendRequestEmail()
al enviar el formulario.