【Material-UI】多选模式（Multiple values）与Autocomplete的高级用法解析

文章目录

- 一、多选模式的基本用法
- 二、高级用法
- - 1. 固定选项（Fixed options）
  - 2. 复选框（Checkboxes）
  - 3. 限制标签显示数量（Limit tags）
- 三、性能优化与最佳实践
- - 1. 筛选已选项（filterSelectedOptions）
  - 2. 只读模式（readOnly）
- 四、总结

在现代Web应用中，多选功能常被用于标签（tags）管理、选择多个偏好项等场景。Material-UI的Autocomplete组件提供了强大的多选功能，使用户能够轻松选择多个值。本文将详细介绍如何使用Autocomplete的多选模式，包括固定标签、复选框、限制标签数量等高级用法。

一、多选模式的基本用法

在Autocomplete组件中启用多选模式非常简单，只需设置multiple属性为true。这样，用户就可以选择多个选项，这些选项会以标签的形式显示在输入框中。

示例代码

import React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';const top100Films = [{ title: 'The Shawshank Redemption', year: 1994 },{ title: 'The Godfather', year: 1972 },{ title: 'The Dark Knight', year: 2008 },// 更多电影数据...
];function MultipleAutocomplete() {return (<Autocompletemultipleoptions={top100Films}getOptionLabel={(option) => option.title}renderInput={(params) => <TextField {...params} label="Favorites" placeholder="Select movies" />}/>);
}export default MultipleAutocomplete;

在上述代码中，我们通过multiple属性启用了多选模式，options属性提供了可选项数据，而getOptionLabel属性用于指定选项的显示文本。

二、高级用法

1. 固定选项（Fixed options）

在某些情况下，可能需要一些标签始终存在且不可移除。我们可以通过设置选项的disabled属性来实现这一功能。例如，可以将某些选项设为“固定标签”，用户不能删除它们。

示例代码

<Autocompletemultipleoptions={top100Films}getOptionLabel={(option) => option.title}defaultValue={[top100Films[0], top100Films[1]]}renderInput={(params) => <TextField {...params} label="Fixed tag" />}renderTags={(value, getTagProps) =>value.map((option, index) => (<Chiplabel={option.title}{...getTagProps({ index })}disabled={index === 0} // 第一个标签为固定标签/>))}
/>

在这个例子中，第一个标签被设置为disabled，用户无法删除该标签。

2. 复选框（Checkboxes）

在多选模式下，复选框可以用来明确表示选项是否被选中。通过使用Checkbox组件，可以实现这一功能，使得用户体验更加直观。

示例代码

import Checkbox from '@mui/material/Checkbox';<Autocompletemultipleoptions={top100Films}disableCloseOnSelectgetOptionLabel={(option) => option.title}renderOption={(props, option, { selected }) => (<li {...props}><Checkboxicon={icon}checkedIcon={checkedIcon}style={{ marginRight: 8 }}checked={selected}/>{option.title}</li>)}renderInput={(params) => <TextField {...params} label="Favorites" placeholder="Select movies" />}
/>

在这个示例中，我们使用renderOption属性自定义了每个选项的渲染，加入了Checkbox组件以显示选中状态。

3. 限制标签显示数量（Limit tags）

在多选模式下，如果选中的选项很多，可能会导致输入框变得混乱。limitTags属性允许我们限制在输入框中显示的标签数量，当超过该数量时，其他标签会以“+N”的形式显示。

示例代码

<AutocompletemultiplelimitTags={2}options={top100Films}getOptionLabel={(option) => option.title}defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}renderInput={(params) => <TextField {...params} label="limitTags" placeholder="Favorites" />}sx={{ width: '500px' }}
/>

在这个示例中，我们将limitTags设置为2，因此当选中的标签超过两个时，额外的标签会被隐藏，并显示为“+N”的形式。

三、性能优化与最佳实践

1. 筛选已选项（filterSelectedOptions）

在多选模式下，如果选项非常多，可以使用filterSelectedOptions属性来隐藏已选中的选项，防止用户重复选择。这在数据量大且选项不需要重复选择的场景中特别有用。

2. 只读模式（readOnly）

在某些情况下，我们可能需要将多选输入框设置为只读模式，以防止用户编辑已选择的标签。可以通过设置readOnly属性实现这一功能。

示例代码

<Autocompletemultipleoptions={top100Films}readOnlyvalue={[top100Films[0], top100Films[1]]}getOptionLabel={(option) => option.title}renderInput={(params) => <TextField {...params} label="Read-only" />}sx={{ width: '500px' }}
/>