¿Cómo puedo obtener el valor de lo que se seleccionó en el menú desplegable? Tengo estos códigos a continuación, pero mostrará esto en el archivo console.log:
MUI: el método
getOptionLabelde Autocompletar devolvió el número (0) en lugar de una cadena para 0.
import React, { useState } from "react"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; export default function ComboBox() { const [selected, setSelected] = useState(0); const handleChange = (e) => setSelected(e.target.value); console.log(selected); return ( <Autocomplete disablePortal id="combo-box-demo" options={Items} sx={{ width: 300 }} value={selected} onChange={handleChange} renderInput={(params) => <TextField {...params} label="Items" />} /> ); } const Items = [ { label: "Car" }, { label: "Book" }, { label: "Chair" }, { label: "Pencil" } ];Además, ¿funcionará esto en material-ui ^ 4.12.3? enlace de codesandbox: https://codesandbox.io/s/combobox-material-demo-forked-g88fi
necesita obtener el segundo parámetro de handleChange. y es valor.
const handleChange = (e,v) => setSelected(v);como esto:
import React, { useState } from "react"; import TextField from "@mui/material/TextField"; import Autocomplete from "@mui/material/Autocomplete"; export default function Edit() { const [selected, setSelected] = useState( { label: "" }); const handleChange = (e,v) => setSelected(v); console.log(selected); return ( <Autocomplete disablePortal id="combo-box-demo" options={Items} sx={{ width: 300 }} value={selected} onChange={handleChange} renderInput={(params) => <TextField {...params} label="Items" />} /> ); } const Items = [ { label: "Car" }, { label: "Book" }, { label: "Chair" }, { label: "Pencil" } ];funciona muy bien para mí.