如何獲取下拉串列中所選內容的值？我在下面有這些代碼，但它會在 console.log 中顯示：
MUI：
getOptionLabel自動完成方法回傳數字 (0) 而不是字串 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" }
];
另外，這會在 material-ui ^4.12.3 中作業嗎？代碼和框鏈接：https ://codesandbox.io/s/combobox-material-demo-forked-g88fi
uj5u.com熱心網友回復：
您需要獲取handleChange 的第二個引數。這是價值。
const handleChange = (e,v) => setSelected(v);
像這樣：
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" }
];
它對我很有效。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/360906.html
標籤：javascript 反应 材质-ui
上一篇：比較兩個陣列并僅產生值