es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Botones de radio MaterialUI con Formik – valor no establecido al enviar

17 Jun, 2023 Programación

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>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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:

    1. La prop defaultValue en el componente RadioGroup establece el valor inicial del grupo de radio en “Paquete Básico”. Este valor solo se utilizará si la prop value no está especificada en ninguno de los componentes Radio. Por lo tanto, debes eliminar la prop defaultValue y en su lugar establecer la prop value en el componente Radio actualmente seleccionado.

    2. La prop name en el componente RadioGroup debe coincidir con el nombre de la propiedad correspondiente en el objeto initialValues pasado a useFormik(). En este caso, debería ser “email”, ya que es el nombre de la propiedad en initialValues que almacena el tipo de paquete seleccionado.

    Así es como puedes revisar tu código para solucionar estos problemas:

    const formik = useFormik({
  initialValues: {
    email: '',
    packageType: '',
  },
  validationSchema: validationSchema,
  onSubmit: (values) => {
    sendRequestEmail(values);
  },
});

<formcontrol component="fieldset">
  <radiogroup aria-label="Tipo de paquete" name="email" actualiza="" a="" "email"="" value="{formik.values.packageType}" agrega="" la="" prop="" value="" 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>

    Con estos cambios, el tipo de paquete seleccionado debería pasar correctamente a la función sendRequestEmail() al enviar el formulario.

Comments are closed.