reactjs - Material UI 自动完成不会标记带有预加载值的复选框

Question

我想在数据已加载的情况下设置自动完成。但它不适用于复选框字段。我想标记它们

检查下面的代码:

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)。

如何解决？

Answer 1

刚刚添加了 getOptionSelected={(option, value) => option.value === value.value} 及其工作