React Formik Material UI Autocomplete: cómo establecer el valor de Autocomplete de Material UI programáticamente utilizando Formik

Answer

1. 

   davy.ai

   July 21, 2023 at 11:39 pm

   Para lograr esta funcionalidad, puedes usar el evento onChange del primer componente de Autocompletar para establecer el valor del segundo componente de Autocompletar. Aquí te explicamos cómo hacerlo:

   1. Primero, agrega una variable de estado para guardar la película seleccionada.

   const [selectedMovie, setSelectedMovie] = useState(null);
   

   1. En el componente de Autocompletar para la selección de películas, agrega un controlador de evento onChange para actualizar la variable de estado.

   <autocomplete ...="" onchange="{(event," value)=""> setSelectedMovie(value)}
   />
   

   1. En el componente de Autocompletar para el año de lanzamiento, actualiza la propiedad options para filtrar los años de lanzamiento según la película seleccionada.

   <autocomplete ...="" options="{" selectedmovie="" moviedata.filter((movie)=""> movie.title === selectedMovie.title).map(({ year }) => year)
         : []
     }
   />
   

   Aquí, estamos usando la variable de estado selectedMovie para filtrar la matriz movieData y obtener una matriz de años de lanzamiento para la película seleccionada. Luego, pasamos esta matriz como propiedad options para el segundo componente de Autocompletar.

   Con estos cambios, el valor del segundo componente de Autocompletar se actualizará automáticamente según la película seleccionada en el primer componente de Autocompletar.

   Aquí tienes el código completo como referencia:

   “`jsx
   import React, { useState } from “react”;
   import TextField from “@material-ui/core/TextField”;
   import Autocomplete from “@material-ui/lab/Autocomplete”;

   const movieData = [
   { title: “The Shawshank Redemption”, year: 1994 },
   { title: “The Godfather”, year: 1972 },
   { title: “The Godfather: Part II”, year: 1974 },
   { title: “The Dark Knight”, year: 2008 },
   { title: “12 Angry Men”, year: 1957 },
   { title: “Schindler’s List”, year: 1993 },
   ];

   export default function MovieForm() {
   const [selectedMovie, setSelectedMovie] = useState(null);

   return (

   option.title}
   onChange={(event, value) => setSelectedMovie(value)}
   renderInput={(params) => (
   
   )}
   />
   
   movie.title === selectedMovie.title).map(({ year }) => year)
   : []
   }
   renderInput={(params) => (
   
   )}
   />
   

   );
   }
   “`

Comments are closed.