React Suite 表单组件

React Suite 是一套企业级的 React 组件库，提供了丰富的表单组件，帮助开发者快速构建漂亮而功能强大的表单界面。

1. 表单组件特性

• 支持各种常见的表单元素，如输入框、下拉框、单选框、复选框等。
• 支持表单验证，提供了多种验证规则，如必填、长度限制、格式验证等。
• 提供丰富的表单布局，如网格布局、嵌套布局等，适应不同的设计需求。
• 支持表单项的动态增删、表单的重置、表单数据的获取等常用功能。
• 支持自定义表单元素的样式和逻辑，方便扩展和定制。

2. 主要组件

2.1 Input 输入框

使用 Input 组件可以创建一个文本输入框，支持更多高级功能，如输入限制、前后缀、清空按钮等。

import { Input } from 'rsuite';

// 简单示例
<Input placeholder="请输入" />

// 带前后缀和清空按钮的示例
<Input placeholder="请输入" prefix={<Icon icon="email" />} suffix={<Icon icon="close" />} />

// 输入限制示例
<Input placeholder="请输入数字" type="number" min={0} max={100} />

2.2 Select 下拉框

使用 Select 组件可以创建一个下拉框，支持自定义选项和多选等功能。

import { Select } from 'rsuite';

// 简单示例
<Select data={['Option 1', 'Option 2', 'Option 3']} />

// 多选示例
<Select data={['Option 1', 'Option 2', 'Option 3']} multiple />

// 异步加载示例
<Select asyncDataLoader={() => fetchOptions()} />

2.3 Radio 单选框

使用 Radio 组件可以创建一个单选框，支持自定义选项和默认选中项等功能。

import { Radio } from 'rsuite';

// 简单示例
<Radio.Group>
  <Radio value="option1">Option 1</Radio>
  <Radio value="option2">Option 2</Radio>
  <Radio value="option3">Option 3</Radio>
</Radio.Group>

// 带默认选中项的示例
<Radio.Group defaultValue="option1">
  <Radio value="option1">Option 1</Radio>
  <Radio value="option2">Option 2</Radio>
  <Radio value="option3">Option 3</Radio>
</Radio.Group>

2.4 Checkbox 复选框

使用 Checkbox 组件可以创建一个复选框，支持单个和多个选项的选择。

import { Checkbox } from 'rsuite';

// 单个选项示例
<Checkbox>Option 1</Checkbox>

// 多个选项示例
<Checkbox.Group>
  <Checkbox value="option1">Option 1</Checkbox>
  <Checkbox value="option2">Option 2</Checkbox>
  <Checkbox value="option3">Option 3</Checkbox>
</Checkbox.Group>

2.5 Form 表单

使用 Form 组件可以将表单项组合起来形成一个完整的表单，支持验证、提交、重置等功能。

import { Form, FormGroup, ControlLabel, FormControl, Button } from 'rsuite';

// 表单示例
<Form>
  <FormGroup>
    <ControlLabel>Name</ControlLabel>
    <FormControl name="name" />
  </FormGroup>
  <FormGroup>
    <ControlLabel>Email</ControlLabel>
    <FormControl name="email" type="email" />
  </FormGroup>
  <Button appearance="primary" type="submit">提交</Button>
  <Button appearance="default" type="reset">重置</Button>
</Form>

3. 安装

npm install @rsuite/forms

更多详细的使用文档和示例请参考 React Suite 官方文档。