React Suite 表单组件

React Suite 是一个流行的前端库，包含一组专为中间平台和后端产品设计的 React 组件。表单组件提供了一种制作表单并获取用户输入然后将其转发到服务器以进行进一步数据处理的方法。我们可以在 ReactJS 中使用以下方法来使用 React Suite 表单组件。

表单道具：

checkDelay：用于延迟数据校验时的处理。
checkTrigger：用于表示表单验证触发类型。
classPrefix：用于表示组件CSS类的前缀。
errorFromContext：用于表示FormControl中的错误提示默认来自Context。
流体：它允许输入 100% 的表单来填充容器。
formDefaultValue：用于表示表单的默认值。
formError：用于表单的错误信息。
formValue：用于表示表单的值（受控）。
layout：用于设置表单内元素布局的左右列。
model：用于表示 SchemaModel 对象。
onChange：数据变化时触发的回调函数。
onCheck：是数据校验时触发的回调函数。
onError：是错误检查时触发的回调函数。

表格方法：

check：此方法用于验证表单数据。
checkAsync：检查表单数据的异步函数。
checkForField：该方法用于Checklist单个字段值。
checkForFieldAsync：检查表单单个字段值的异步函数。
cleanErrors：此方法用于清除错误消息。
cleanErrorForFiled：此方法用于清除单个字段的错误消息。

FormControl 道具：

接受者：用于表示被代理的组件。
checkTrigger：用于表示数据校验触发类型。
classPrefix：用于表示组件CSS类的前缀。
errorMessage：用于显示错误消息。
errorPlacement：用于放置错误消息。
name：用于表示表单控件的名称。
readOnly：用于使控件只读。
明文：用于制作控件明文。

FormGroup 道具：

classPrefix：用于表示组件CSS类的前缀。
controlId：用于设置受控组件的id 。

ControlLabel 道具：

classPrefix：用于表示组件CSS类的前缀。
htmlFor：用于表示HTML标签标签的属性。
srOnly：仅用于屏幕阅读器。

帮助块道具：

classPrefix：用于表示组件CSS类的前缀。
htmlFor：用于表示HTML标签标签的属性。
tooltip：用于指示是否通过 Tooltip 组件显示。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install rsuite
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import {
  Form, FormGroup, FormControl, Button,
  ControlLabel,
} from 'rsuite';
  
export default function App() {
  
  return (
    
      React Suite Form Component
      
        
          Enter your Email:
          
        
        
          Enter your Password:
          
        
        
          
        
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://rsuitejs.com/components/form/