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

news2024/9/29 19:18:17

文章目录

- 一、多选模式的基本用法
- 二、高级用法
- - 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 (
    <Autocomplete
      multiple
      options={top100Films}
      getOptionLabel={(option) => option.title}
      renderInput={(params) => <TextField {...params} label="Favorites" placeholder="Select movies" />}
    />
  );
}

export default MultipleAutocomplete;

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

二、高级用法

1. 固定选项（Fixed options）

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

示例代码

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

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

2. 复选框（Checkboxes）

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

示例代码

import Checkbox from '@mui/material/Checkbox';

<Autocomplete
  multiple
  options={top100Films}
  disableCloseOnSelect
  getOptionLabel={(option) => option.title}
  renderOption={(props, option, { selected }) => (
    <li {...props}>
      <Checkbox
        icon={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”的形式显示。

示例代码

<Autocomplete
  multiple
  limitTags={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属性实现这一功能。

示例代码

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