ReactJS 语义 UI 输入元素

ReactJS 是一个流行的 JavaScript 库，用于构建用户界面和单页应用。语义 UI 是一个基于 ReactJS 的界面框架，它提供了多种输入元素，以帮助开发人员创建功能丰富的表单和其他交互性组件。本文将介绍 ReactJS 语义 UI 输入元素的相关内容。

表单输入元素

ReactJS 语义 UI 提供了各种表单输入元素，如文本框，单选框，多选框等等。下面是一些常见的表单输入元素及其用法：

文本框

文本框是一种允许用户输入文本的表单组件。语义 UI 的文本框组件使用 Input 标签定义。例如：

import { Input } from 'semantic-ui-react'

function MyForm() {
  return (
    <div>
      <Input placeholder='请输入用户名' />
    </div>
  )
}

在上面的代码中，我们创建了一个文本框，它的 placeholder 属性设置为 “请输入用户名”。这样用户就能看到一个提示，告诉他们应该在这里输入什么样的文本。

单选框

单选框组件允许用户从多个选项中选择一个。语义 UI 的单选框组件使用 Radio 标签定义。例如：

import { Radio } from 'semantic-ui-react'

function MyForm() {
  return (
    <div>
      <Radio label='男' name='gender' value='male' />
      <Radio label='女' name='gender' value='female' />
    </div>
  )
}

在上面的代码中，我们创建了两个单选框，一个用于选择男性，一个用于选择女性。label 属性设置单选框的标签，name 属性指定该单选框属于哪个组，value 属性表示该选项的值。

多选框

多选框组件允许用户从多个选项中选择多个。语义 UI 的多选框组件使用 Checkbox 标签定义。例如：

import { Checkbox } from 'semantic-ui-react'

function MyForm() {
  return (
    <div>
      <Checkbox label='足球' name='sports' value='football' />
      <Checkbox label='篮球' name='sports' value='basketball' />
      <Checkbox label='羽毛球' name='sports' value='badminton' />
    </div>
  )
}

在上面的代码中，我们创建了三个多选框，用于选择足球、篮球和羽毛球。label 属性表示多选框的标签，name 属性指定该多选框属于哪个组，value 属性表示该选项的值。

表单验证

表单验证可以确保用户使用表单时输入了有效且适当的数据。ReactJS 语义 UI 提供了多种表单验证方法，包括内置验证和自定义验证。

内置验证

我们可以使用语义 UI 的内置验证器来验证表单，只需在相应的表单元素上添加 required、minLength 等属性即可。例如：

import { Input } from 'semantic-ui-react'

function MyForm() {
  return (
    <div>
      <Input placeholder='请输入密码' type='password' minLength={8} required />
    </div>
  )
}

上面的代码中，我们创建了一个密码文本框，设置了 minLength 和 required 属性来设置最小长度并确保用户必须输入密码以继续进行。

自定义验证

如果内置验证器不能满足要求，我们可以使用自定义验证器。自定义验证器可以使用 JavaScript 编写，根据表单元素的值手动验证并提供错误消息。例如：

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

function MyForm() {
  const validateEmail = (email) => {
    if (!email) {
      return '请输入邮箱地址。'
    }

    if (!/\S+@\S+\.\S+/.test(email)) {
      return '请输入有效的邮箱地址。'
    }
  }

  return (
    <div>
      <Form>
        <Form.Field>
          <label>邮箱地址</label>
          <Input
            placeholder='请输入邮箱地址'
            onChange={(event) => {
              const error = validateEmail(event.target.value)
              if (error) {
                event.target.setCustomValidity(error)
              } else {
                event.target.setCustomValidity('')
              }
            }}
          />
        </Form.Field>
      </Form>
    </div>
  )
}

上面的代码中，我们创建了一个邮箱地址文本框，并使用自定义验证器来确保用户输入有效的地址。我们定义了一个名为 validateEmail 的函数，该函数接收一个邮箱地址字符串并返回一个错误消息或 undefined（表示通过验证）。我们在文本框的 onChange 事件处理程序中调用这个函数，并根据返回的错误消息来调用 setCustomValidity 方法设置自定义验证错误消息。

结论

ReactJS 语义 UI 提供了各种强大的输入元素和表单验证器，可以帮助开发人员快速创建功能丰富的表单和其他交互组件。在本文中，我们介绍了一些常见的输入元素及其用法，并提供了内置验证和自定义验证的示例。如果您正在构建 ReactJS 应用程序并需要表单输入和验证功能，ReactJS 语义 UI 是一个强大的选择。