如何解决如何清除自动完成值
我正在使用材料ui自动完成功能。
<Autocomplete
multiple
id="tags-outlined"
options={options}
getOptionLabel={(option) => option && option.name}
value={catArray}
onChange={handleCategoryFilter}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
placeholder="Categories"
/>
)}
/>
首先,我希望所选值不显示在选项中;其次,我想清除自动完成功能。你能指导我如何做这些事情吗?
我正在通过setCatArray([])
清除值,但这不是可行的
解决方法
您可以使用材料ui自动完成的默认属性filterSelectedOptions
。如果为true,它将隐藏列表框中的选定选项。
要清除自动完成的值,它会在选择框的末尾提供默认的清除图标。您可以从那里清除它。
尝试我的沙盒link。也可以尝试一些更重要的ui演示here。
UPDATE
:如果要管理清算值,可以使用自动完成的value
属性,并通过更新其值在onchange
中对其进行管理。
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
value={values}
getOptionSelected={(option,value) => value.title === option.title}
getOptionLabel={(option) => option.title}
filterSelectedOptions
onChange={(e,valueTags) => {
e.preventDefault();
const valuesArray = [];
valueTags.forEach((valueTag) => {
valuesArray.push({
title: top100Films
.filter((tag) => valueTag.title === tag.title)
.shift().title
});
});
setValues(valuesArray);
}}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="filterSelectedOptions"
placeholder="Favorites"
/>
)}
/>
,
您是否尝试过将autocomplete=false
添加到组件的属性列表中?
如果要从自动完成中筛选出选定的选项。将filterSelectedOptions={true}
传递到您的组件
第二,您可以通过控制所选值并将其设置为空数组来清除该值。这是我完整的示例
const options = ["one","two","three","four"];
export default function MyAutocomplete() {
const [values,setValues] = React.useState<string[]>([]);
const onChange = (_,value) => {
setValues(value);
};
const clearSelected = () => {
setValues([]);
};
return (
<>
<button onClick={clearSelected}>Clear selected</button>
<Autocomplete
multiple
id="tags-outlined"
options={options}
getOptionLabel={(option) => option}
value={values}
onChange={onChange}
filterSelectedOptions
renderInput={(params) => (
<TextField {...params} variant="outlined" placeholder="Categories" />
)}
/>
</>
);
}
实时示例
, const options = ["one",setValues] = React.useState([]);
const onChange = (_,value) => {
setValues(value);
};
const clearSelected = () => {
setValues([]);
};
return (
<>
<button onClick={clearSelected}>Clear selected</button>
<Autocomplete
multiple
id="tags-outlined"
options={options}
getOptionLabel={(option) => option}
value={values}
onChange={onChange}
filterSelectedOptions
renderInput={(params) => (
<TextField {...params} variant="outlined" placeholder="Categories" />
)}
/>
</>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。