Material UI 自动完成：从选项中排除默认值

Question

我有一个 Material-ui 自动完成元素（标签模式），其中包含选项列表和默认值列表，它们也包含在选项中。有没有办法避免第二次添加默认值？

我试过使用

for (var i = options.length - 1; i >= 0; i--) {
    for (var j = 0; j < defualtOptions.length; j++) {
        if (options[i] && options[i].name === defualtOptions[j].name) {
            options.splice(i, 1);
        }
    }
}

但这意味着如果任何默认选项被删除，它们将不会出现以供重新选择。

这是我的组件代码：

export default function PersonPicker(params) {
    let { people, defualtPeople, label, variant, onChange } = params;

    for (var i = people.length - 1; i >= 0; i--) {
        for (var j = 0; j < defualtPeople.length; j++) {
            if (people[i] && people[i].name === defualtPeople[j].name) {
                people.splice(i, 1);
            }
        }
    }

    return (
        <div>
            <Autocomplete
                onChange={(event, value) => onChange(event, value)}
                multiple={true}
                options={people}
                getOptionLabel={(option) => option.name}
                defaultValue={defualtPeople}
                filterSelectedOptions={true}
                selectOnFocus={true}
                renderInput={(paramaters) => (
                    <TextField
                        variant={variant}
                        label={label}
                        placeholder={label}
                        {...paramaters}
                        {...params}
                    />
                )}
                renderTags={(tagValue, getTagProps) => {
                    return tagValue.map((option, index) => (
                        <Chip
                            {...getTagProps({ index })}
                            label={option.name}
                            avatar={
                                <Avatar
                                    alt={option.name}
                                    src={option.imageSrc}
                                />
                            }
                        />
                    ));
                }}
            />
        </div>
    );
}

Answer 1

我不确定我是否理解这个问题，但是，除非我错了，否则您只需在自动完成组件中使用 filterSelectedOptions 道具即可实现您的需求。如果它不起作用，也许您应该检查用于比较的选项 value/prop 是什么，这会使您的组件无法按预期进行过滤。我认为问题更多的是使用什么作为比较，而不是其他任何东西。

以您的问题代码为例：

<Autocomplete
            onChange={(event, value) => onChange(event, value)}
            multiple={true}
            options={people}
            getOptionLabel={(option) => option.name}
            defaultValue={defualtPeople}
            filterSelectedOptions
            selectOnFocus={true}
            renderInput={(paramaters) => (
                <TextField
                    variant={variant}
                    label={label}
                    placeholder={label}
                    {...paramaters}
                    {...params}
                />
            )}

查看文档： https://material-ui.com/es/components/autocomplete/#multiple-values

Material UI 自动完成：从选项中排除默认值

Material UI Autocomplete: exclude defaults from options

reactjs

autocomplete

material-ui