Uso del componente Autocompletar de Material-UI con Formik

Te recomendamos que pruebes esta solución en un ambiente controlado antes de enviarlo a producción, saludos.

Solución:

tu problema es que handleChange no funcionará de la manera que lo estás haciendo.

Si echas un vistazo a los documentos handleChange:

Controlador de eventos de cambio de entrada general. Esto actualizará los valores.[key] donde key es el nombre de la entrada que emite el evento attribute. si el nombre attribute no está presente, handleChange buscará la identificación de una entrada attribute. Nota: “entrada” aquí significa todas las entradas HTML.

Que debería funcionar bien, pero el problema es que el TextField dentro Autocomplete solo se activará handleChange cuando escribe algo en él, y el valor será el texto, no el id u otra propiedad que desee, por lo que debe mudarse handleChange al Autocomplete.

Y hay otro problema, no puedes usar handleChange en el Autocomplete porque no hace referencia a la entrada que desea y también tiene parámetros diferentes de los normales onChange de El inputcomo se puede ver en los documentos.

onChange

función
La devolución de llamada se activa cuando cambia el valor.
Firma:
function(event: object, value: any) => void
event: El origen del evento de la devolución de llamada
value: null

Así que lo que tienes que hacer es usar setFieldValue y pásalo a Autocomplete me gusta

onChange=(e, value) => setFieldValue("city_id", value)

Debe pasar el nombre de su campo y el valor que desea obtener.

Aquí hay un ejemplo de trabajo

@vencovsky ha proporcionado la respuesta correcta que todavía funciona para mí con Material UI 14.10.1.

Estoy agregando un poco más ya que tengo mi campo configurado en required en usar Yup validación.

Para que esto funcione correctamente, tengo lo siguiente:
Yup configuración:

validationSchema = 
    Yup.object().shape(
        contact: Yup.string().max(255).required('Contact is required'),
    )

reaccionar:

 `$contact?.firstName $contact?.lastName`
    onChange= "")
    onOpen=handleBlur
    includeInputInList
    renderInput=(params) => (
        
    )
/>

Cuando el usuario hace clic en el Autocomplete elemento, dispara el onOpen que ejecuta el FormikonBlur y marca el campo como tocado. Si no se recoge un artículo, Formik flags el campo y muestra el Contact is required mensaje de validación.

Puedes confirmar nuestro análisis ejecutando un comentario y dejando una valoración te estamos agradecidos.

---

---

Utiliza Nuestro Buscador