Material UI 自动完成:从选项中排除默认值
Material UI Autocomplete: exclude defaults from options
我有一个 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>
);
}
我不确定我是否理解这个问题,但是,除非我错了,否则您只需在自动完成组件中使用 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 自动完成元素(标签模式),其中包含选项列表和默认值列表,它们也包含在选项中。有没有办法避免第二次添加默认值?
我试过使用
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>
);
}
我不确定我是否理解这个问题,但是,除非我错了,否则您只需在自动完成组件中使用 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