Material UI 自动完成不会用预加载的值标记复选框
Material UI Autocomplete doesnt mark checkbox with pre loaded values
我想在已加载数据的情况下设置自动完成功能。但它不适用于复选框字段。我要标记它们
检查下面的代码:
const [extensions, setExtensions] = useState([{value: 1, label: 'Excel', extension: 'xls'},{value: 3, label: 'PDF', extension: 'pdf'}]);
<Autocomplete
multiple
id="extensions"
limitTags={1}
className="autocompleCreate"
options={extensionList}
value={extensions}
disableClearable={true}
onChange={(event, value) => {
setExtensions(value);}
}
openText={props.t("activity_report_autocomplete_open")}
closeText={props.t("activity_report_autocomplete_close")}
getOptionLabel={(option) => option.label}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.label}
</React.Fragment>
)}
disabled={type === 3 ? true : false}
style={{ width: 600, marginRight : 100 }}
renderInput={(params) => (
<TextField {...input} {...params} variant="filled" label={props.t("label_configuration_create_extensions")} />
)}
/>
extensionList 包含其他扩展(其他选项,如 Word)。
我该如何解决?
刚刚添加了getOptionSelected={(option, value) => option.value === value.value}
及其作品
我想在已加载数据的情况下设置自动完成功能。但它不适用于复选框字段。我要标记它们
检查下面的代码:
const [extensions, setExtensions] = useState([{value: 1, label: 'Excel', extension: 'xls'},{value: 3, label: 'PDF', extension: 'pdf'}]);
<Autocomplete
multiple
id="extensions"
limitTags={1}
className="autocompleCreate"
options={extensionList}
value={extensions}
disableClearable={true}
onChange={(event, value) => {
setExtensions(value);}
}
openText={props.t("activity_report_autocomplete_open")}
closeText={props.t("activity_report_autocomplete_close")}
getOptionLabel={(option) => option.label}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.label}
</React.Fragment>
)}
disabled={type === 3 ? true : false}
style={{ width: 600, marginRight : 100 }}
renderInput={(params) => (
<TextField {...input} {...params} variant="filled" label={props.t("label_configuration_create_extensions")} />
)}
/>
extensionList 包含其他扩展(其他选项,如 Word)。
我该如何解决?
刚刚添加了getOptionSelected={(option, value) => option.value === value.value}
及其作品