React 表单

在 Web 开发中，表单是用户与网站或应用程序进行交互的主要途径之一。React 作为一款高效的 JavaScript 库，为开发者提供了丰富的工具和方法来创建和管理表单。本文将深入探讨如何使用 React 构建表单，包括数据绑定、表单验证、以及受控和非受控组件的概念。

基础： 受控组件

在 React 中，受控组件是一种通过 React 状态来管理输入的组件。这意味着每当用户在表单元素中输入时，React 都会更新对应的状态。

代码案例：简单的受控输入

import React, { useState } from "react";

function FormExample() {
  const [name, setName] = useState("");

  const handleInputChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <label>
        姓名：
        <input type="text" value={name} onChange={handleInputChange} />
      </label>
    </form>
  );
}

export default FormExample;

在上面的例子中，我们使用useState hook 来创建一个名为name的状态变量和一个setName函数。当用户在输入框中输入时，onChange事件触发handleInputChange函数，并更新name状态。

进阶： 非受控组件

非受控组件不直接由 React 控制，它们不会响应状态或属性的变化。通常用于不需要持久化到状态的场景。

代码案例：非受控输入

import React from "react";

function UncontrolledForm() {
  return (
    <form>
      <label>
        姓名：
        <input type="text" defaultValue="John Doe" />
      </label>
    </form>
  );
}

export default UncontrolledForm;

在此示例中，我们没有使用状态来存储输入值，而是使用了默认值defaultValue。

表单验证

表单验证是确保用户输入的数据符合要求的重要步骤。React 社区推荐使用第三方库如 Formik 或 React Hook Form 来实现复杂的验证逻辑。

代码案例：使用 Formik 进行表单验证

首先，安装 Formik:

npm install formik

然后创建一个简单的表单：

import React from 'react';
import { useFormik } from 'formik';

function FormWithValidation() {
  const formik = useFormik({
    initialValues: {
      name: '',
      email: '',
    },
    validate: values => {
      const errors = {};
      if (!values.name) {
        errors.name = '需要填写名字';
      }
      if (!values.email) {
        errors.email = '需要填写邮箱';
      } else if (/* 一些邮箱格式验证逻辑 */) {
        errors.email = '邮箱格式不正确';
      }
      return errors;
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="name">
        姓名：
        <input
          id="name"
          name="name"
          type="text"
          onChange={formik.handleChange}
          value={formik.values.name}
        />
        {formik.errors.name && <div>{formik.errors.name}</div>}
      </label>
      <label htmlFor="email">
        邮箱：
        <input
          id="email"
          name="email"
          type="email"
          onChange={formik.handleChange}
          value={formik.values.email}
        />
        {formik.errors.email && <div>{formik.errors.email}</div>}
      </label>
      <button type="submit">提交</button>
    </form>
  );
}

export default FormWithValidation;

Formik 提供了useFormik hook，它简化了表单状态管理和验证过程。我们定义了初始值、验证规则和提交行为。validate函数返回错误对象，这些错误可以显示在输入旁边。

结论

React 提供了灵活的方式来创建和管理表单，无论是通过受控组件还是非受控组件。同时，结合像 Formik 这样的库，我们可以更高效地处理复杂的验证逻辑，从而提升用户体验。掌握这些知识后，开发者可以轻松构建出既美观又功能强大的动态表单。