我是ReactJS的新手,目前正在使用@mui控件,带有自动完成功能的多选下拉菜单。
下面是我的子组件,我正在使用它,并收到了错误消息。“index.js:1 Material-UI:Autocomplete的getOptionLabel
方法返回了对象([object Object]),而不是{“label”:“east”,“value”:“east”}的字符串。
import React, {useState} from "react";
import { Autocomplete } from "@material-ui/lab";
import { TextField, Checkbox } from "@material-ui/core";
import { CheckBoxOutlineBlank, CheckBox } from "@material-ui/icons";
const Icon = <CheckBoxOutlineBlank />;
const checkedIcon = <CheckBox />;
export default function MultiSelectDropdown(props) {
//const savedVal = props.StoredMsgData;
const [updtVal, setupdtVal] = useState(savedVal);
//const allDDData = props.dropdownData;
const mode = props.mode;
const [open, setOpen] = useState(false);
const allDDData = [
{ label: "select all", value: "select all", selected: true },
{ label: "east", value: "east" },
{ label: "east1", value: "east1" },
{ label: "east2", value: "east2" },
{ label: "east3", value: "east3" },
];
savedVal =['east1'];
const onChangeHandler = (e, values) => {
console.log(values);
};
const onChange = (e, values) => {
console.log(values);
};
return (
<div>
<Autocomplete
multiple
options={allDDData}
disableCloseOnSelect
onChange={(e, v) => setupdtVal(v)}
defaultValue={savedVal}
getOptionSelected={(option, obj) => option.label === obj.label}
renderOption={(option, selected) => {
if (savedVal.includes(option)) {
selected = true;
}
{
return (
<div>
<Checkbox
icon={Icon}
checkedIcon={checkedIcon}
checked={selected}
/>
{option}
</div>
);
}
}}
renderInput={(params) => {
return (
<TextField
{...params}
label={props.type}
placeholder={props.type}
variant="outlined"
/>
);
}}
style={{ width: "100%", zIndex: 999 }}
/>
</div>
);
}
我做了我的研究,付出了努力,但无法破解它。任何帮助将不胜感激。请原谅我,如果这是一个初学者的错误。
要自动完成的内容无效
谢谢
1条答案
按热度按时间r9f1avp51#
getOptionLabel
应该返回一个返回字符串函数。所以我想你可以试试这个:
getOptionLabel={(option) => option.label}
个