Material UI 自动完成默认值，多选答案

【问题标题】：Material UI Autocomplete default value with multiple selectionMaterial UI 自动完成默认值，多选
【发布时间】：2021-09-06 12:52:50
【问题描述】：

我有一个具有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(", ")
        }
    }

我做错了什么吗？

感谢您的宝贵时间！

【问题讨论】：

标签： reactjs autocomplete material-ui

【解决方案1】：

解决方案

可能听起来很简单和新手，但我找到了解决方案并且非常简单。

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

希望有一天能帮助到某人！

【讨论】：