React Suite CheckPicker 组件介绍

React Suite CheckPicker 组件是一个适用于 React 应用程序的多选选择器，提供了方便的多选功能。它可以让用户从列表中选择多个选项，并将所选选项的值返回给应用程序。该组件强大的自定义样式功能可以让应用程序开发人员根据自己的需要，轻松打造符合自己风格的选择器。

特点

• 自定义样式，可以通过 CSS 样式表或 Class 类名随意调整组件样式。
• 支持本地/远程数据源，可以从本地数组或远程数据源（使用 Ajax 载入数据）中进行数据选择。
• 过滤选项，用户可以快速定位自己想要的选项。
• 支持键盘导航，用户可以通过键盘上下箭头键和 Enter 键进行快速选择。
• 可选的分组，可以在列表中对选项进行分组，方便用户进行选择。

安装

使用 npm 安装：

npm install rsuite-checkpicker --save

使用

import React from 'react';
import { CheckPicker } from 'rsuite-checkpicker';

const options = [
  {
    label: 'Apple',
    value: 'apple'
  },
  {
    label: 'Banana',
    value: 'banana'
  },
  {
    label: 'Orange',
    value: 'orange'
  }
];

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      value: []
    };
  }

  handleChange = (value) => {
    this.setState({ value });
  };

  render() {
    const { value } = this.state;
    return (
      <CheckPicker
        data={options}
        value={value}
        onChange={this.handleChange}
      />
    );
  }
}

Props

• value: (array) 选中的值。
• data: (array) 选项数据源。
• defaultValue: (array) 组件表单项默认值。
• onChange: (Function) 当某一项被选中/取消选中时的回调函数，参数为当前选中的值数组。
• placeholder: (string) 组件未选中时的显示文字。
• disabled: (boolean) 组件是否禁用。
• renderValue: (Function) 自定义选中项的展示内容，参数为当前被选中的值数组。
• renderExtraFooter: (Function) 自定义选项面板底部的内容。
• groupBy: (Function) 分组回调函数，返回一个字符串，表示当前选项应该属于哪个组。
• groupRender: (Function) 分组的渲染函数，返回一个 JSX 元素，表示分组的标题。
• menuClassName: (string) 弹出菜单的自定义 class。
• menuAutoWidth: (boolean) 弹出菜单是否根据内容自适应宽度。
• menuStyle: (object) 弹出菜单的自定义样式。
• searchBar: (boolean) 是否开启搜索功能。
• searchPlaceholder: (string) 搜索框 Placeholder。
• searchBy: (Function) 定义搜索规则的回调函数。
• virtualized: (boolean) 是否开启列表虚拟化优化。
• height: (number) 当 virtualized 为 true 时，虚拟化列表的高度。
• minHeight: (number) 当 virtualized 为 true 时，虚拟化列表的最小高度。
• style: (object) 组件样式对象。

方法

• open(): 手动打开下拉菜单面板。
• close(): 手动关闭下拉菜单面板。
• toggle(): 手动切换下拉菜单面板状态。

样式定制

React Suite CheckPicker 组件内置了丰富的样式变量，可以满足大部分开发需求。此外，组件通过接收 classNamePrefix 属性，可以方便地辅助在自己的样式表中修改样式。

// 导入 CheckPicker 的 Less 样式实现
@import '~rsuite-checkpicker/lib/styles/index';

// 自定义 CheckPicker 样式
.my-checkpicker {
  @include rs-checkpicker();
  
  .rs-picker-toggle {
    border-color: #ccc;
    &:hover {
      border-color: #999;
    }
  }
  
  .rs-picker-menu-check-item {
    font-weight: bold;
  }
}

更多组件样式变量和样式表结构请查看官方文档 样式定制 部分。

结语

React Suite CheckPicker 组件是一个功能强大、易于使用的多选选择器。它提供了丰富的自定义功能，开发者可以根据自己的需求进行二次开发。