第三章：React 进阶

表单处理

在 React 中，表单处理是一个核心功能，用于收集用户输入并与应用程序状态交互。React 提供了两种主要方式处理表单：受控组件（Controlled Components）和非受控组件（Uncontrolled Components）。

1. 受控组件

受控组件将表单数据（如输入值、选择状态等）绑定到 React 组件的状态（State），并通过事件处理函数（如 onChange）更新状态。

示例代码

import { useState } from 'react';

function ControlledForm() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted value: ${inputValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

特点

  • 实时同步表单数据与组件状态。
  • 适用于需要验证或动态更新的表单。

2. 非受控组件

非受控组件通过 DOM 直接获取表单数据（如使用 ref），而不是通过 React 状态管理。

示例代码

import { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Submitted value: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

特点

  • 更接近传统 HTML 表单行为。
  • 适用于简单表单或需要直接操作 DOM 的场景。

3. 表单验证

React 表单可以通过以下方式实现验证：

  • 受控组件验证：在 onChange 或 onSubmit 时检查状态值。
  • 第三方库：如 Formik 或 React Hook Form，提供更强大的验证和错误处理。

示例：简单验证

const [error, setError] = useState('');

const handleSubmit = (e) => {
  e.preventDefault();
  if (!inputValue.trim()) {
    setError('Name is required');
    return;
  }
  // 提交逻辑
};

4. 处理复杂表单

对于多字段表单（如动态表单、嵌套字段），可以使用以下方法：

  • 状态对象：将表单数据存储为对象（如 { name: '', email: '' }）。
  • 动态字段管理：通过数组或对象映射生成表单字段。

示例：动态字段

const [fields, setFields] = useState([{ id: 1, value: '' }]);

const addField = () => {
  setFields([...fields, { id: Date.now(), value: '' }]);
};

5. 第三方库推荐

  1. React Hook Form：轻量级、高性能，支持受控和非受控组件。
  2. Formik：提供完整的表单解决方案（验证、提交、错误处理）。
  3. Yup：与 Formik 配合使用的模式验证库。

示例：React Hook Form

import { useForm } from 'react-hook-form';

function HookForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} />
      <button type="submit">Submit</button>
    </form>
  );
}

总结

方法适用场景优点缺点
受控组件需要实时验证或动态更新的表单数据流清晰，易于调试代码量较多
非受控组件简单表单或直接操作 DOM代码简洁难以集成复杂逻辑
第三方库企业级表单需求功能强大，社区支持学习成本

通过合理选择表单处理方式，可以高效地实现用户输入交互功能。

Last Updated::