syncfusion-react-multiselect

用途

本技能用于在 React 应用中实现 Syncfusion 的 MultiSelect Dropdown 组件，让用户从列表中选取多个值。适用于多选下拉框、复选框列表选择器、标签输入等场景。

主要能力

组件支持过滤、分组、模板、复选框、标签（chip）、虚拟滚动等能力。主要包为 @syncfusion/ej2-react-dropdowns，主组件为 MultiSelectComponent。复选框模块为 CheckBoxSelection，通过 <Inject services={[CheckBoxSelection]} /> 注入；虚拟滚动模块为 VirtualScroll，通过 <Inject services={[VirtualScroll]} /> 注入。

使用方式

安装与样式引入：

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import '@syncfusion/ej2-react-dropdowns/styles/tailwind3.css';
// Also import base dependencies:
// @syncfusion/ej2-base/styles/tailwind3.css
// @syncfusion/ej2-buttons/styles/tailwind3.css
// @syncfusion/ej2-inputs/styles/tailwind3.css

基础示例（字符串数组）：

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

export default function App() {
  const sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Tennis'];

  return (
    <MultiSelectComponent
      id="multiselect"
      dataSource={sportsData}
      placeholder="Select sports"
    />
  );
}

对象数据与字段映射示例：

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';

export default function App() {
  const sportsData = [
    { id: 'game1', sports: 'Badminton' },
    { id: 'game2', sports: 'Football' },
    { id: 'game3', sports: 'Tennis' },
  ];
  const fields = { text: 'sports', value: 'id' };

  return (
    <MultiSelectComponent
      id="multiselect"
      dataSource={sportsData}
      fields={fields}
      placeholder="Select a game"
    />
  );
}

关键属性参考：

dataSource（string[] | object[] | DataManager）：始终必需，要显示的数据。
fields（FieldSettingsModel）：使用对象数据时映射 text、value、groupBy、disabled。
mode（'Default' | 'Box' | 'CheckBox' | 'Delimiter'）：改变选择显示方式，标签（Box）、复选框或逗号分隔。
value（string[] | number[] | object[]）：加载时预选项目。
allowFiltering（boolean）：启用输入即搜索过滤。
allowCustomValue（boolean）：允许用户输入列表中不存在的值。
allowObjectBinding（boolean）：返回完整对象作为选中值而非原始值。
enableVirtualization（boolean）：用于 500+ 项目以提升性能。
allowResize（boolean）：允许用户调整弹出层大小。
popupHeight（string）：限制弹出列表高度（默认 300px）。
popupWidth（string）：设置弹出层宽度（默认与输入框一致）。
placeholder（string）：输入占位文本。

适用场景

多标签输入（chip 显示）：使用 mode="Box"（默认），每个选择变为一个标签。
复选框多选：使用 mode="CheckBox" 并注入 CheckBoxSelection 模块。
搜索/过滤长列表：设置 allowFiltering={true}，远程数据时处理 filtering 事件。
预选值：将 value 属性传为值字段值的数组，如 value={['id1', 'id2']}。
按类别分组：在 fields 属性中添加 groupBy，如 fields={{ text: 'name', value: 'id', groupBy: 'category' }}。
大数据集（1000+ 项目）：设置 enableVirtualization={true} 并注入 VirtualScroll 模块。
禁用特定选项：在数据中添加布尔 disabled 列并映射，如 fields={{ ..., disabled: 'isDisabled' }}。
列表外自定义条目：设置 allowCustomValue={true}，处理 customValueSelection 事件执行自定义操作。

限制

资料未提供收费、价格、平台兼容性、具体效果或完整使用步骤等事实，相关内容暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制