ReactJS 语义 UI 表单集合

ReactJS 是一种流行的声明式 JavaScript 库，用于构建用户界面，而语义 UI 是一个 ReactJS 组件库，可用于快速构建漂亮的表单。

特性

• 语义化的 HTML。
• 支持表单验证。
• 支持表单嵌套。
• 可自定义表单的外观和行为。

安装

使用 npm 安装：

$ npm install semantic-ui-react --save

使用

在组件中导入所需组件：

import { Form, Input, Button } from 'semantic-ui-react';

创建表单：

<Form onSubmit={this.handleFormSubmit}>
  <Form.Field>
    <label>用户名</label>
    <Input type="text" placeholder="请输入用户名" />
  </Form.Field>
  <Form.Field>
    <label>密码</label>
    <Input type="password" placeholder="请输入密码" />
  </Form.Field>
  <Button type="submit">提交</Button>
</Form>

可以通过传递验证规则来验证表单：

<Form onSubmit={this.handleFormSubmit}>
  <Form.Field>
    <label>用户名</label>
    <Input type="text" placeholder="请输入用户名" validate="required" />
  </Form.Field>
  <Form.Field>
    <label>密码</label>
    <Input type="password" placeholder="请输入密码" validate="required|min:6" />
  </Form.Field>
  <Button type="submit">提交</Button>
</Form>

通过设置 validate 属性来传递验证规则。在示例中，required 规则表示该字段必填，min:6 规则表示该字段必须至少包含 6 个字符。

结论

使用语义 UI 可以快速构建漂亮的表单，支持表单验证和嵌套。它还提供了自定义表单的外观和行为的功能。这个包作为GUI Form的一部分提供给开发人员这个组件库功能十分完整,强烈建议给开发人员使用。