(例如)我希望限制用户在我的自动完成组件中仅选择 3 个选项,并在 TAG 数组的长度达到 3 时禁用这些选项。问题是 api 中没有 limitMaxNumberOfTags 选项,我无法找到任何方法访问 Selected 标签数组{除了 limitTags,它只限制可见标签}。类似的事情可能会有所帮助
getOptionDisabled={(options, tags) => (tags.length > 3 ? true : false)}
。这是到目前为止我的自动完成实现
<Autocomplete
multiple
id="tags-outlined"
options={students}
getOptionLabel={(option) => option.personalInfo.firstName + ' ' + option.personalInfo.lastName}
defaultValue={[...added]}
onChange={(e, newVal) => setAdded([...newVal])}
renderOption={(option, state) => {
return (
<Chip
icon={
<FaceIcon /> /*<Avatar color="primary" variant='outlined' size="small" className={classes.small}></Avatar>*/
}
label={option.personalInfo.firstName + ' ' + option.personalInfo.lastName}
color="default"
variant="outlined"
{...state}
/>
);
}}
renderTags={(options, getTagProps) =>
options.map((option) => (
<Chip
icon={
<FaceIcon /> …Run Code Online (Sandbox Code Playgroud)