Material UI 多选自动完成默认值

Question

我有一个具有 multiple selection 的 Material UI Autocomplete 组件，我需要一些默认值。

我的问题是checkbox selection。名称在文本字段中，但未被选为值。

这是我的组件：

<Autocomplete
    multiple
    className={classes.select}
    disableCloseOnSelect
    options={users}
    value={consistenceUser}
    onChange={handleUserChange}
    defaultChecked={consistenceUser}
    getOptionLabel={(option) => (option.name)}
    renderOption={(option, { selected }) => (
        <React.Fragment>
            <Checkbox
                icon={icon}
                checkedIcon={checkedIcon}
                style={{ marginRight: 8 }}
                checked={selected}
            />
            {option.name}
        </React.Fragment>
    )}
    renderTags={option => renderUserValues(userValue)}
    renderInput={(params) => (
        <TextField
            {...params}
            label={i18n.t("worklogModal.user")}
            variant="outlined"
        />
    )}
/>
<Typography className={classes.errorText}>
    {userError}
</Typography>

其中 consistenceUser 是 array of user objects，userValue 是 array of user ids。

这是在文本字段中呈现用户名的方法，效果很好，但是当我将它们添加为默认值时它们没有被选中。

const renderUserValues = selected => {
        if (selected) {
            let shownValues = users.filter(user => selected.includes(user.id)).map(user => { return user.name })
            return [...shownValues].join(", ")
        }
    }

我做错了什么吗？

感谢您的宝贵时间！

Answer 1

解决方案

可能听起来很简单而且是菜鸟，但我找到了解决方案并且非常简单。

我添加了 getOptionSelected={(option, value) => option.id === value.id}，现在我的 default values 被选中并且它正常工作。

希望有一天能帮到别人！

Material UI 多选自动完成默认值

Material UI Autocomplete default value with multiple selection

reactjs

autocomplete

material-ui

解决方案