0
270
VistasMUI Autocompletar opciones personalizadas, sin mostrar la opción seleccionada
Estoy usando MUI v5 Autocomplete para mi menú desplegable.
Tengo opciones con title e id cuando se selecciona una opción, quiero almacenar la id en el estado, también quiero actualizar el valor de selección (autocompletar aquí) con la película seleccionada.
El cuadro de texto en la selección no refleja el valor establecido mediante props de value .
isOptionEqualToValue pero ayuda a resaltar el valor cuando el menú desplegable está abierto. Cuando el menú desplegable está cerrado, el nombre de la película seleccionada no se refleja.
https://codesandbox.io/s/combobox-material-demo-forked-osex0?file=/demo.js
import * as React from "react"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; export default function ComboBox() { const [movie, setMovie] = React.useState(2); return ( <> Movie ID value in the state {movie} <Autocomplete disablePortal id="combo-box-demo" value={movie == null ? "" : movie} options={top100Films} onChange={(e, data) => { if (data && data.id) { setMovie(data.id); } }} getOptionLabel={(option) => option.title || ""} sx={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Movie" />} isOptionEqualToValue={(option, value) => option.id === value} /> </> ); } const top100Films = [ { title: "The Shawshank Redemption", id: 1 }, { title: "The Godfather", id: 2 }, { title: "The Godfather: Part II", id: 3 } ];Incluso cuando la opción está seleccionada, no se refleja en el cuadro de texto
1 Respuestas
Responde la pregunta0
La propiedad de value debe ser uno de los objetos en la matriz de options si desea utilizar el modo controlado :
const getDefaultOption = () => top100Films.find((m) => m.id === 2) ?? null; export default function ComboBox() { const [movie, setMovie] = React.useState(getDefaultOption); return ( <> <Box mb={3}>Movie ID value in the state {movie.id}</Box> <Autocomplete disablePortal id="combo-box-demo" value={movie} options={top100Films} onChange={(e, data) => setMovie(data)} getOptionLabel={(option) => option.title || ""} sx={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Movie" />} /> </> ); } 