React Suite 下拉组件

React Suite 是一款基于 React 的 UI 组件库，它提供了众多高质量、易用的组件。本文将介绍 React Suite 中的下拉组件。

Dropdown

Dropdown 是 React Suite 中最常用的下拉组件之一，它可以用于选择单个或多个选项、输入关键字搜索选项等场景。下面是一个简单的使用示例：

import { Dropdown } from 'rsuite';

const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' },
];

function MyComponent() {
  const [value, setValue] = useState(null);

  return (
    <Dropdown
      value={value}
      onChange={setValue}
      data={options}
      placeholder="Select an option"
    />
  );
}

Dropdown 的 props 属性比较多，其中最常用的有：

• value: 选中的值。可以是单个值或数组，视 multiple 属性而定。
• onChange: 值改变时的回调函数。
• data: 下拉选项的数据。数据格式为 { label: string, value: any }[]。
• placeholder: 当没有选中项时的提示文字。

除此之外，还可以设置下拉选项的高度、是否可搜索、是否可多选等参数，具体请参考官方文档。

SelectPicker

SelectPicker 是一款比 Dropdown 更加专注于选择功能的下拉组件。它提供了分组、搜索、带标签的多选等功能，可以满足多数选择需求。下面是一个示例代码：

import { SelectPicker } from 'rsuite';

const data = [
  {
    label: 'Group 1',
    value: [
      { label: 'Option 1', value: 'option1' },
      { label: 'Option 2', value: 'option2' },
    ],
  },
  {
    label: 'Group 2',
    value: [
      { label: 'Option 3', value: 'option3' },
      { label: 'Option 4', value: 'option4' },
    ],
  },
];

function MyComponent() {
  const [value, setValue] = useState(null);

  return (
    <SelectPicker
      searchable={false}
      cleanable={false}
      data={data}
      value={value}
      onChange={setValue}
      placeholder="Select an option"
      style={{ width: 224 }}
    />
  );
}

与 Dropdown 类似，SelectPicker 也具有多种参数可供设置，包括但不限于：

• searchable: 是否开启搜索功能。
• cleanable: 是否显示清除按钮。
• data: 选项数据，相比 Dropdown 多了一个分组的概念。数据格式为 { label: string, value: Array<{ label: string, value: any }> }[]。
• value: 选中的值。
• onChange: 值改变时的回调函数。
• placeholder: 提示文字。
• style: 组件样式。

除了以上两种下拉组件，React Suite 还提供了 AutoComplete、Cascader、CheckTree、MultiCascader 等多种下拉组件，可根据项目需求选择合适的组件。更多详细信息请查阅官方文档。