React从基础入门到高级实战：React 核心技术 - 表单处理与验证深度指南

news2025/5/29 5:17:32

React 表单处理与验证深度指南

在现代 Web 应用中，表单是用户与应用交互的核心方式之一。无论是注册、登录、结账还是数据提交，表单都扮演着至关重要的角色。React 作为一款流行的前端框架，提供了多种处理表单的工具和方法，帮助开发者构建高效、用户友好的表单体验。

本文专为需要处理用户输入的开发者设计，旨在帮助你全面掌握 React 中的表单处理与验证技术。我们将从基础概念讲起，逐步深入到高级实践，包括受控组件与非受控组件、表单验证、动态表单、错误处理与用户反馈等内容。通过一个用户注册表单案例和一个多步骤结账流程表单练习，你将学会如何高效地管理表单状态和验证用户输入。此外，我们将特别推荐 React Hook Form，并深入探讨其性能优势。

文章内容通俗易懂，同时保持深度和丰富性，包含大量代码示例和实践案例，适合希望系统学习 React 表单开发的开发者。

1. 引言

表单是 Web 应用中不可或缺的组成部分，承担着用户数据收集、验证和提交的重要任务。在传统的 HTML 中，表单处理依赖 DOM 的原生行为，而在 React 中，表单管理与组件状态紧密结合，提供了更高的灵活性和控制力。

React 中的表单处理主要分为受控组件和非受控组件两种方式，每种方式都有其独特的优势和适用场景。此外，随着应用的复杂性增加，表单验证、动态字段管理和错误处理成为开发者必须掌握的关键技能。本文将通过理论讲解、代码示例和实践案例，带你逐步掌握这些技术。

我们还将重点介绍 React Hook Form，一个轻量、高效的表单管理库，它通过非受控组件的方式减少渲染开销，成为现代 React 开发的首选工具。无论你是初学者还是有经验的开发者，本文都将为你提供实用的指导和深入的洞察。

2. 受控组件与非受控组件

在 React 中，表单元素（如 <input>、<textarea>、<select>）的管理方式与传统 HTML 有所不同。React 提供了两种主要方法：受控组件和非受控组件。理解它们的区别和应用场景是掌握 React 表单处理的第一步。

2.1 受控组件

受控组件是指表单元素的值由 React 的状态（state）控制。开发者通过 state 设置表单的值，并通过事件处理函数更新 state，实现数据的单向流动。

特点
  • 表单元素的值与 React 的 state 保持同步。
  • 每次用户输入都会触发状态更新和组件重新渲染。
  • 适合需要实时验证或动态交互的场景。
代码示例

以下是一个简单的受控输入框示例：

import { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <label>受控输入</label>
      <input
        type="text"
        value={value}
        onChange={handleChange}
        placeholder="请输入内容"
      />
      <p>当前值: {value}</p>
    </div>
  );
}
  • value={value}：将输入框的值绑定到 state。
  • onChange={handleChange}：监听输入变化并更新 state。
优势
  • 实时控制：可以立即获取和验证用户输入。
  • 动态行为：易于实现条件渲染、表单联动等功能。
  • 一致性：与 React 的数据驱动理念高度契合。
注意事项
  • 频繁的状态更新可能导致性能问题，尤其是在大型表单中。
  • 需要为每个表单字段定义 state 和事件处理函数。

2.2 非受控组件

非受控组件是指表单元素的值由 DOM 自身管理，React 不直接控制其状态。开发者通过 ref 获取 DOM 元素的值。

特点
  • 表单数据存储在 DOM 中，与传统 HTML 表单行为类似。
  • 不需要为每个字段维护 state，减少渲染开销。
  • 适合简单表单或性能敏感的场景。
代码示例

以下是一个非受控输入框示例：

import { useRef } from 'react';

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

  const handleSubmit = () => {
    alert(`输入值: ${inputRef.current.value}`);
  };

  return (
    <div>
      <label>非受控输入</label>
      <input
        type="text"
        ref={inputRef}
        placeholder="请输入内容"
      />
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
}
  • ref={inputRef}：通过 ref 引用 DOM 节点。
  • inputRef.current.value：在需要时获取输入值。
优势
  • 性能更高：无需频繁更新 state 和重新渲染。
  • 简单直接：代码量少，接近原生 HTML 表单。
注意事项
  • 不适合需要实时验证的场景。
  • 数据获取依赖手动操作，灵活性较低。

2.3 对比与选择

特性受控组件非受控组件
状态管理由 React state 管理由 DOM 管理
数据同步实时同步按需获取
性能可能频繁渲染渲染开销小
验证易于实时验证通常提交时验证
适用场景复杂表单、动态交互简单表单、性能敏感
选择建议
  • 受控组件：推荐用于大多数场景，特别是需要实时验证、动态字段或复杂交互的表单。
  • 非受控组件：适用于简单的静态表单或性能要求极高的应用。

3. 表单验证

表单验证是确保用户输入数据有效性、完整性和安全性的重要环节。在 React 中，开发者可以手动编写验证逻辑，但这往往繁琐且难以维护。借助现代工具如 React Hook Form 和 Yup，我们可以更高效地实现表单验证。

3.1 React Hook Form 简介

React Hook Form 是一个轻量、高性能的表单管理库，专为 React 函数组件设计。它通过 Hook API 提供表单状态管理、验证和提交功能，极大简化了开发流程。

核心优势
  • 性能优越：基于非受控组件，减少不必要的渲染。
  • 简洁 API：易于学习和集成。
  • 灵活验证：支持多种验证库（如 Yup、Zod）。
  • 动态支持：轻松处理动态字段。
安装
npm install react-hook-form

3.2 基本使用

以下是一个简单的表单示例，使用 React Hook Form 实现基础验证：

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

function SimpleForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log('表单数据:', data);
  };

  return (
    <div>
      <label>用户名</label>
      <input {...register('username', { required: '用户名必填' })} />
      {errors.username && <p>{errors.username.message}</p>}
      <label>密码</label>
      <input type="password" {...register('password', { required: '密码必填' })} />
      {errors.password && <p>{errors.password.message}</p>}
      <button onClick={handleSubmit(onSubmit)}>提交</button>
    </div>
  );
}
  • useForm()：初始化表单管理。
  • register('fieldName')：注册表单字段并定义验证规则。
  • handleSubmit(onSubmit)：处理表单提交。
  • errors：访问验证错误信息。

3.3 结合 Yup 实现复杂验证

Yup 是一个强大的模式验证库，通过声明式规则定义复杂的验证逻辑，与 React Hook Form 无缝集成。

安装
npm install yup @hookform/resolvers
示例：带验证的注册表单
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object().shape({
  username: yup.string().required('用户名必填').min(3, '至少 3 个字符'),
  email: yup.string().email('无效的邮箱').required('邮箱必填'),
  password: yup.string().required('密码必填').min(6, '至少 6 个字符'),
});

function ValidatedForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema),
  });

  const onSubmit = (data) => {
    console.log('表单数据:', data);
  };

  return (
    <div>
      <label>用户名</label>
      <input {...register('username')} />
      {errors.username && <p>{errors.username.message}</p>}
      <label>邮箱</label>
      <input {...register('email')} />
      {errors.email && <p>{errors.email.message}</p>}
      <label>密码</label>
      <input type="password" {...register('password')} />
      {errors.password && <p>{errors.password.message}</p>}
      <button onClick={handleSubmit(onSubmit)}>提交</button>
    </div>
  );
}
  • yup.object().shape()：定义验证规则。
  • yupResolver(schema)：将 Yup 集成到 React Hook Form。
  • 错误信息通过 errors.fieldName.message 显示。
高级验证

Yup 支持条件验证、自定义规则等。例如，验证密码和确认密码是否一致：

const schema = yup.object().shape({
  password: yup.string().required('密码必填').min(6, '至少 6 个字符'),
  confirmPassword: yup.string()
    .oneOf([yup.ref('password'), null], '密码不一致')
    .required('确认密码必填'),
});

4. 动态表单

动态表单允许用户根据需要添加或删除表单字段，例如输入多个地址或教育经历。这种功能在复杂表单中非常常见。

4.1 使用 useFieldArray

React Hook Form 提供了 useFieldArray Hook，专门用于管理动态字段数组。

示例：动态地址字段
import { useForm, useFieldArray } from 'react-hook-form';

function DynamicForm() {
  const { control, register, handleSubmit } = useForm({
    defaultValues: { addresses: [{ address: '' }] },
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'addresses',
  });

  const onSubmit = (data) => {
    console.log('表单数据:', data);
  };

  return (
    <div>
      <h2>地址</h2>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`addresses.${index}.address`, { required: '地址必填' })}
            placeholder="地址"
          />
          <button type="button" onClick={() => remove(index)}>删除</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ address: '' })}>添加地址</button>
      <button onClick={handleSubmit(onSubmit)}>提交</button>
    </div>
  );
}
  • useFieldArray：管理动态字段。
  • append：添加新字段。
  • remove：删除指定字段。
  • register(addresses.${index}.address)：注册动态字段。
验证动态字段

结合 Yup 验证动态字段：

const schema = yup.object().shape({
  addresses: yup.array().of(
    yup.object().shape({
      address: yup.string().required('地址必填'),
    })
  ),
});

5. 错误处理与用户反馈

良好的错误处理和用户反馈是提升表单体验的关键。React Hook Form 提供了灵活的错误管理和反馈机制。

5.1 显示错误信息

通过 formState.errors 访问错误：

<input {...register('username', { required: '用户名必填' })} />
{errors.username && <p>{errors.username.message}</p>}

5.2 自定义反馈

  • 实时反馈：通过 mode: 'onChange' 启用实时验证。
const { register, formState: { errors } } = useForm({ mode: 'onChange' });
  • 表单级错误：提交时显示所有错误。
  • 焦点管理：使用 setFocus 将焦点移到错误字段。

5.3 用户友好建议

  • 使用颜色（如红色）高亮错误。
  • 提供清晰的错误消息。
  • 支持无障碍（ARIA 属性）。

6. 案例：用户注册表单

以下是一个完整的用户注册表单，支持验证和动态地址字段。

import { useForm, useFieldArray } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

const schema = yup.object().shape({
  username: yup.string().required('用户名必填').min(3, '至少 3 个字符'),
  email: yup.string().email('无效的邮箱').required('邮箱必填'),
  password: yup.string().required('密码必填').min(6, '至少 6 个字符'),
  addresses: yup.array().of(
    yup.object().shape({
      address: yup.string().required('地址必填'),
    })
  ),
});

function RegisterForm() {
  const { register, control, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema),
    defaultValues: { addresses: [{ address: '' }] },
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'addresses',
  });

  const onSubmit = (data) => {
    console.log('注册成功:', data);
  };

  return (
    <div>
      <label>用户名</label>
      <input {...register('username')} />
      {errors.username && <p>{errors.username.message}</p>}
      <label>邮箱</label>
      <input {...register('email')} />
      {errors.email && <p>{errors.email.message}</p>}
      <label>密码</label>
      <input type="password" {...register('password')} />
      {errors.password && <p>{errors.password.message}</p>}
      <h3>地址</h3>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`addresses.${index}.address`)}
            placeholder="地址"
          />
          <button type="button" onClick={() => remove(index)}>删除</button>
          {errors.addresses?.[index]?.address && (
            <p>{errors.addresses[index].address.message}</p>
          )}
        </div>
      ))}
      <button type="button" onClick={() => append({ address: '' })}>添加地址</button>
      <button onClick={handleSubmit(onSubmit)}>注册</button>
    </div>
  );
}
关键点
  • 使用 Yup 定义多层验证。
  • useFieldArray 管理动态字段。
  • 实时错误反馈提升体验。

7. 练习：多步骤表单

实现一个多步骤结账流程表单，包含以下步骤：

  1. 填写地址
  2. 选择支付方式
  3. 确认订单

实现思路

  • 使用 state 管理当前步骤。
  • 每个步骤为独立组件。
  • React Hook Form 管理整个表单状态。

参考代码

import { useForm, FormProvider } from 'react-hook-form';
import { useState } from 'react';

function Step1({ nextStep }) {
  const { register, formState: { errors } } = useForm();
  return (
    <div>
      <h3>步骤 1: 填写地址</h3>
      <input {...register('address', { required: '地址必填' })} />
      {errors.address && <p>{errors.address.message}</p>}
      <button onClick={nextStep}>下一步</button>
    </div>
  );
}

function Step2({ nextStep, prevStep }) {
  const { register, formState: { errors } } = useForm();
  return (
    <div>
      <h3>步骤 2: 选择支付方式</h3>
      <select {...register('payment', { required: '请选择支付方式' })}>
        <option value="">请选择</option>
        <option value="credit">信用卡</option>
        <option value="paypal">PayPal</option>
      </select>
      {errors.payment && <p>{errors.payment.message}</p>}
      <button onClick={prevStep}>上一步</button>
      <button onClick={nextStep}>下一步</button>
    </div>
  );
}

function Step3({ prevStep, onSubmit }) {
  return (
    <div>
      <h3>步骤 3: 确认订单</h3>
      <p>请确认您的订单信息。</p>
      <button onClick={prevStep}>上一步</button>
      <button onClick={onSubmit}>提交订单</button>
    </div>
  );
}

function MultiStepForm() {
  const methods = useForm();
  const [step, setStep] = useState(1);

  const nextStep = () => setStep(step + 1);
  const prevStep = () => setStep(step - 1);
  const onSubmit = (data) => {
    console.log('订单数据:', data);
    alert('订单已提交');
  };

  return (
    <FormProvider {...methods}>
      {step === 1 && <Step1 nextStep={nextStep} />}
      {step === 2 && <Step2 nextStep={nextStep} prevStep={prevStep} />}
      {step === 3 && <Step3 prevStep={prevStep} onSubmit={methods.handleSubmit(onSubmit)} />}
    </FormProvider>
  );
}

8. React Hook Form 的性能优势

React Hook Form 的核心优势在于其基于非受控组件的实现方式，避免了传统受控组件的频繁渲染问题。

8.1 为什么性能更好？

  • 减少渲染：仅在必要时更新 DOM。
  • 无状态管理开销：无需为每个字段维护 state。
  • 高效事件处理：通过 ref 管理表单数据。

8.2 与其他库的对比

与 Formik 等库相比，React Hook Form 在大型表单中渲染次数显著减少。例如：

  • Formik：每个输入变化触发整个表单重新渲染。
  • React Hook Form：仅更新相关字段。

8.3 数据支持

根据官方性能测试，React Hook Form 在复杂表单中的渲染次数可减少 50%-70%（具体数据见官方文档）。

9. 总结与进阶建议

本文系统介绍了 React 中的表单处理与验证技术，从受控与非受控组件的基础知识，到 React Hook Form 和 Yup 的高级应用，再到动态表单和多步骤表单的实践案例，内容全面且实用。

总结

  • 受控组件适合复杂交互，非受控组件适合简单场景。
  • React Hook Form 是高效表单管理的首选工具。
  • 结合 Yup 可以轻松实现复杂验证。
  • 动态表单和多步骤表单提升了用户体验。

进阶建议

  • 探索 React Hook Form 的 useWatch 和 useFormContext。
  • 学习 Yup 的条件验证和自定义规则。
  • 在实际项目中实践多步骤表单设计。

掌握本文内容后，你将能够自信地处理任何表单需求，并构建高效、用户友好的 React 应用。

附代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React 表单处理与验证深度指南</title>
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-hook-form@7/dist/index.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/yup@1/dist/yup.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@hookform/resolvers@3/dist/umd/index.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-6">
  <div id="root" class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-md"></div>

  <script type="text/babel">
    const { useState, useForm, useFieldArray, FormProvider } = ReactHookForm;
    const { yupResolver } = HookFormResolvers;
    const yup = window.yup;

    // 受控组件示例
    function ControlledInput() {
      const [value, setValue] = useState('');
      const handleChange = (e) => setValue(e.target.value);

      return (
        <div className="mb-4">
          <label className="block text-gray-700">受控输入</label>
          <input
            type="text"
            value={value}
            onChange={handleChange}
            placeholder="请输入内容"
            className="mt-1 p-2 border rounded w-full"
          />
          <p className="mt-2 text-gray-600">当前值: {value}</p>
        </div>
      );
    }

    // 非受控组件示例
    function UncontrolledInput() {
      const inputRef = React.useRef(null);
      const handleSubmit = () => alert(`输入值: ${inputRef.current.value}`);

      return (
        <div className="mb-4">
          <label className="block text-gray-700">非受控输入</label>
          <input
            type="text"
            ref={inputRef}
            placeholder="请输入内容"
            className="mt-1 p-2 border rounded w-full"
          />
          <button
            onClick={handleSubmit}
            className="mt-2 bg-blue-500 text-white p-2 rounded"
          >
            提交
          </button>
        </div>
      );
    }

    // 带验证的简单表单
    function SimpleForm() {
      const { register, handleSubmit, formState: { errors } } = useForm();
      const onSubmit = (data) => console.log('表单数据:', data);

      return (
        <div className="mb-4">
          <label className="block text-gray-700">用户名</label>
          <input
            {...register('username', { required: '用户名必填' })}
            className="mt-1 p-2 border rounded w-full"
          />
          {errors.username && <p className="text-red-500">{errors.username.message}</p>}
          <label className="block text-gray-700 mt-2">密码</label>
          <input
            type="password"
            {...register('password', { required: '密码必填' })}
            className="mt-1 p-2 border rounded w-full"
          />
          {errors.password && <p className="text-red-500">{errors.password.message}</p>}
          <button
            onClick={handleSubmit(onSubmit)}
            className="mt-2 bg-blue-500 text-white p-2 rounded"
          >
            提交
          </button>
        </div>
      );
    }

    // 用户注册表单
    const schema = yup.object().shape({
      username: yup.string().required('用户名必填').min(3, '至少 3 个字符'),
      email: yup.string().email('无效的邮箱').required('邮箱必填'),
      password: yup.string().required('密码必填').min(6, '至少 6 个字符'),
      addresses: yup.array().of(
        yup.object().shape({
          address: yup.string().required('地址必填'),
        })
      ),
    });

    function RegisterForm() {
      const { register, control, handleSubmit, formState: { errors } } = useForm({
        resolver: yupResolver(schema),
        defaultValues: { addresses: [{ address: '' }] },
      });
      const { fields, append, remove } = useFieldArray({
        control,
        name: 'addresses',
      });

      const onSubmit = (data) => console.log('注册成功:', data);

      return (
        <div className="mb-4">
          <label className="block text-gray-700">用户名</label>
          <input
            {...register('username')}
            className="mt-1 p-2 border rounded w-full"
          />
          {errors.username && <p className="text-red-500">{errors.username.message}</p>}
          <label className="block text-gray-700 mt-2">邮箱</label>
          <input
            {...register('email')}
            className="mt-1 p-2 border rounded w-full"
          />
          {errors.email && <p className="text-red-500">{errors.email.message}</p>}
          <label className="block text-gray-700 mt-2">密码</label>
          <input
            type="password"
            {...register('password')}
            className="mt-1 p-2 border rounded w-full"
          />
          {errors.password && <p className="text-red-500">{errors.password.message}</p>}
          <h3 className="mt-4 text-lg font-semibold">地址</h3>
          {fields.map((field, index) => (
            <div key={field.id} className="flex items-center mt-2">
              <input
                {...register(`addresses.${index}.address`)}
                placeholder="地址"
                className="p-2 border rounded w-full"
              />
              <button
                type="button"
                onClick={() => remove(index)}
                className="ml-2 bg-red-500 text-white p-2 rounded"
              >
                删除
              </button>
              {errors.addresses?.[index]?.address && (
                <p className="text-red-500">{errors.addresses[index].address.message}</p>
              )}
            </div>
          ))}
          <button
            type="button"
            onClick={() => append({ address: '' })}
            className="mt-2 bg-green-500 text-white p-2 rounded"
          >
            添加地址
          </button>
          <button
            onClick={handleSubmit(onSubmit)}
            className="mt-4 bg-blue-500 text-white p-2 rounded"
          >
            注册
          </button>
        </div>
      );
    }

    // 多步骤表单
    function Step1({ nextStep }) {
      const { register, formState: { errors } } = useForm();
      return (
        <div>
          <h3 className="text-lg font-semibold">步骤 1: 填写地址</h3>
          <input
            {...register('address', { required: '地址必填' })}
            className="mt-1 p-2 border rounded w-full"
          />
          {errors.address && <p className="text-red-500">{errors.address.message}</p>}
          <button
            onClick={nextStep}
            className="mt-2 bg-blue-500 text-white p-2 rounded"
          >
            下一步
          </button>
        </div>
      );
    }

    function Step2({ nextStep, prevStep }) {
      const { register, formState: { errors } } = useForm();
      return (
        <div>
          <h3 className="text-lg font-semibold">步骤 2: 选择支付方式</h3>
          <select
            {...register('payment', { required: '请选择支付方式' })}
            className="mt-1 p-2 border rounded w-full"
          >
            <option value="">请选择</option>
            <option value="credit">信用卡</option>
            <option value="paypal">PayPal</option>
          </select>
          {errors.payment && <p className="text-red-500">{errors.payment.message}</p>}
          <button
            onClick={prevStep}
            className="mt-2 bg-gray-500 text-white p-2 rounded mr-2"
          >
            上一步
          </button>
          <button
            onClick={nextStep}
            className="mt-2 bg-blue-500 text-white p-2 rounded"
          >
            下一步
          </button>
        </div>
      );
    }

    function Step3({ prevStep, onSubmit }) {
      return (
        <div>
          <h3 className="text-lg font-semibold">步骤 3: 确认订单</h3>
          <p>请确认您的订单信息。</p>
          <button
            onClick={prevStep}
            className="mt-2 bg-gray-500 text-white p-2 rounded mr-2"
          >
            上一步
          </button>
          <button
            onClick={onSubmit}
            className="mt-2 bg-blue-500 text-white p-2 rounded"
          >
            提交订单
          </button>
        </div>
      );
    }

    function MultiStepForm() {
      const methods = useForm();
      const [step, setStep] = useState(1);
      const nextStep = () => setStep(step + 1);
      const prevStep = () => setStep(step - 1);
      const onSubmit = (data) => {
        console.log('订单数据:', data);
        alert('订单已提交');
      };

      return (
        <FormProvider {...methods}>
          {step === 1 && <Step1 nextStep={nextStep} />}
          {step === 2 && <Step2 nextStep={nextStep} prevStep={prevStep} />}
          {step === 3 && <Step3 prevStep={prevStep} onSubmit={methods.handleSubmit(onSubmit)} />}
        </FormProvider>
      );
    }

    // 主应用
    function App() {
      return (
        <div>
          <h1 className="text-3xl font-bold mb-6">React 表单处理与验证深度指南</h1>
          <h2 className="text-2xl font-semibold mb-4">受控组件示例</h2>
          <ControlledInput />
          <h2 className="text-2xl font-semibold mb-4">非受控组件示例</h2>
          <UncontrolledInput />
          <h2 className="text-2xl font-semibold mb-4">简单表单示例</h2>
          <SimpleForm />
          <h2 className="text-2xl font-semibold mb-4">用户注册表单</h2>
          <RegisterForm />
          <h2 className="text-2xl font-semibold mb-4">多步骤表单</h2>
          <MultiStepForm />
        </div>
      );
    }

    ReactDOM.render(<App />, document.getElementById('root'));
  </script>
</body>
</html>

这篇指南通过理论与实践相结合，帮助你从基础到高级掌握 React 表单处理技术。希望对你有所帮助！如果有任何问题或改进建议，请随时告诉我。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2387120.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C++】stack，queue和priority_queue（优先级队列）

【C++】stack，queue和priority_queue（优先级队列）

文章目录 前言一、栈&#xff08;stack&#xff09;和队列&#xff08;queue&#xff09;的相关接口1.栈的相关接口2.队列的相关接口 二、栈&#xff08;stack&#xff09;和队列&#xff08;queue&#xff09;的模拟实现1.stack的模拟实现2.queue的模拟实现 三、priority_queu…
阅读更多...
ubuntu中上传项目至GitHub仓库教程

ubuntu中上传项目至GitHub仓库教程

一、到github官网注册用户 1.注册用户 地址&#xff1a;https://github.com/ 2.安装Git 打开终端&#xff0c;输入指令git,检查是否已安装Git 如果没有安装就输入指令 sudo apt-get install git 二、上传项目到github 1.创建项目仓库 进入github主页&#xff0c;点击号…
阅读更多...
windows 下用yolov5 训练模型 给到opencv 使用

windows 下用yolov5 训练模型 给到opencv 使用

windows 使用yolov5训练模型&#xff0c;之后opencv加载模型进行推理。 一&#xff0c;搭建环境 安装 Anaconda 二&#xff0c;创建虚拟环境并安装yolov5 conda create -n yolov5 python3.9 -y conda activate yolov5 git clone https://github.com/ultralytics/yolov5 cd …
阅读更多...
Spark集群架构解析：核心组件与Standalone、YARN模式深度对比(AM，Container，Driver，Executor)

Spark集群架构解析：核心组件与Standalone、YARN模式深度对比(AM，Container，Driver，Executor)

一、核心组件定义与关系拆解 1. ApplicationMaster&#xff08;AM&#xff09; 定义&#xff1a;YARN 框架中的应用管理器&#xff0c;每个应用程序&#xff08;如 Spark 作业&#xff09;对应一个 AM。职责&#xff1a; 向 YARN 的 ResourceManager 申请资源&#xff08;Con…
阅读更多...
Linux Kernel调试：强大的printk（二）

Linux Kernel调试：强大的printk（二）

前言 如果你对printk的基本用法还不熟悉&#xff0c;请先阅读&#xff1a; Linux Kernel调试&#xff1a;强大的printk&#xff08;一&#xff09; 上一篇Linux Kernel调试&#xff1a;强大的printk&#xff08;一&#xff09;我们介绍了printk的基础知识和基本用法&#xf…
阅读更多...
Kafka Kraft模式集群 + ssl

Kafka Kraft模式集群 + ssl

文章目录 启用集群资源规划准备证书创建相关文件夹配置文件启动各Kafka节点 故障转移测试spring boot集成 启用集群 配置集群时关键就是提前梳理好需要的网络资源&#xff0c;完成对应server.properties文件的配置。在执行前先把这些梳理好&#xff0c;可以方便后面的配置&…
阅读更多...
[crxjs]自己创建一个浏览器插件

[crxjs]自己创建一个浏览器插件

参考官方 https://crxjs.dev/vite-plugin/getting-started/vue/create-project 按照流程操作会失败的原因 是因为跨域的问题, 在此处添加 server: {host: "localhost",port: 5173,cors: true,headers: {"Access-Control-Allow-Origin": "*",}…
阅读更多...
类的设计模式——单例、工厂以及建造者模式

类的设计模式——单例、工厂以及建造者模式

1.单例模式 1.1 饿汉模式 单例模式&#xff1a;一个类只能创建一个对象&#xff0c;这个设计模式可以保证系统中该类只有一个实例&#xff0c;并提供一个访问它的全局访问点&#xff0c;该实例被所有程序模块共享。 饿汉模式指在程序初始化时就创建一个唯一的实例对象。适用…
阅读更多...
STM32之看门狗（IWDG）

STM32之看门狗（IWDG）

一、看门狗外设的原理与应用 背景说明 随着单片机的发展&#xff0c;单片机在家用电器、工业自动化、生产过程控制、智能仪器仪表等领域的应用越来越广泛。然而处于同一电力系统中的各种电气设备通过电或磁的联系彼此紧密相连&#xff0c;相互影响&#xff0c;由于运行方式的…
阅读更多...
跟着华为去变革 ——读《常变与长青》有感

跟着华为去变革 ——读《常变与长青》有感

《常变与长青》&#xff0c;是华为郭平总2024年上市的著作。走进这本书&#xff0c;我们能够清晰看到华为30多年的成长过程和伴随期间的变革历程&#xff1a;从一家设备代理商开始&#xff0c;起步蹒跚&#xff0c;砥砺前行&#xff0c;在闯过一个又一个磨难之后&#xff0c;成…
阅读更多...
图像分割技术的实现与比较分析

图像分割技术的实现与比较分析

引言 图像分割是计算机视觉领域中的一项基础技术&#xff0c;其目标是将数字图像划分为多个图像子区域&#xff08;像素的集合&#xff09;&#xff0c;以简化图像表示&#xff0c;便于后续分析和理解。在医学影像、遥感图像分析、自动驾驶、工业检测等众多领域&#xff0c;图…
阅读更多...
node.js配置变量

node.js配置变量

一、下载安装包 1、官网下载 大家可以在官网下载&#xff0c;适合自己电脑以及项目的需要的版本。 二、node.js安装 1、安装 双击下载的安装包文件&#xff0c;通常为 .exe 或 .msi 格式&#xff08;Windows&#xff09;或 .dmg 格式&#xff08;Mac&#xff09;。系统会…
阅读更多...
Ubuntu+Docker+内网穿透：保姆级教程实现安卓开发环境远程部署

Ubuntu+Docker+内网穿透：保姆级教程实现安卓开发环境远程部署

文章目录 前言1. 虚拟化环境检查2. Android 模拟器部署3. Ubuntu安装Cpolar4. 配置公网地址5. 远程访问小结 6. 固定Cpolar公网地址7. 固定地址访问 前言 本文将详细介绍一种创新性的云开发架构&#xff1a;基于Ubuntu系统构建Android仿真容器环境&#xff0c;并集成安全隧道技…
阅读更多...
计算机网络总结(物理层，链路层)

计算机网络总结(物理层，链路层)

目录 第一章 概述 1.基本概念 2.- C/S模式&#xff0c;B/S模式&#xff0c;P2P模式 3.- LAN,WAN,MAN,PAN的划分 4.电路交换与分组交换&#xff0c;数据报交换和虚电路交换 第二章 物理层 1.信号编码&#xff1a;不归零编码&#xff0c;曼切斯特编码 2.几种复用技术的特…
阅读更多...
TIGER - 一个轻量高效的语音分离模型，支持人声伴奏分离、音频说话人分离等 支持50系显卡 本地一键整合包下载

TIGER - 一个轻量高效的语音分离模型，支持人声伴奏分离、音频说话人分离等 支持50系显卡 本地一键整合包下载

TIGER 是一种轻量级语音分离模型&#xff0c;通过频段分割、多尺度及全频帧建模有效提取关键声学特征。该项目由来自清华大学主导研发&#xff0c;通过频率带分割、多尺度以及全频率帧建模的方式&#xff0c;有效地提取关键声学特征&#xff0c;从而实现高效的语音分离。 TIGER…
阅读更多...
无人机降落伞设计要点难点及原理！

无人机降落伞设计要点难点及原理！

一、设计要点 1. 伞体结构与折叠方式 伞体需采用轻量化且高强度的材料&#xff08;如抗撕裂尼龙或芳纶纤维&#xff09;&#xff0c;并通过多重折叠设计&#xff08;如三重折叠缝合&#xff09;减少展开时的阻力&#xff0c;同时增强局部承力区域的强度。 伞衣的几何参数&am…
阅读更多...
20250526给荣品PRO-RK3566的Android13单独编译boot.img

20250526给荣品PRO-RK3566的Android13单独编译boot.img

./build.sh init ./build.sh -K ./build.sh kernel 20250526给荣品PRO-RK3566的Android13单独编译boot.img 2025/5/26 15:25 缘起&#xff1a;需要给荣品PRO-RK3566的Android13单独编译内核&#xff0c;但是不想编译整个系统。于是&#xff1a; 如果特调试某些特别的改动/文件…
阅读更多...
构建版本没mac上传APP方法

构建版本没mac上传APP方法

在苹果开发者的app store connect上架Ios应用的时候&#xff0c;发现需要使用xode等软件来上传iOS的APP。 但是不管是xcode也好&#xff0c;transporter也好&#xff0c;还是命令行工具也好&#xff0c;都必须安装在mac电脑才能使用&#xff0c;。 假如没有mac电脑&#xff0…
阅读更多...
如何解决大模型返回的JSON数据前后加上```的情况

如何解决大模型返回的JSON数据前后加上```的情况

环境说明 springboot 应用使用dashscope-sdk-java对接阿里百练 deepseek v3模型 问题表现 已经指定了输出json格式&#xff0c;但指令不明确&#xff0c;输出JSON格式的写法如下 注&#xff1a;提示词一开始是能正常功能的&#xff0c;但过了几天就出现了异常&#xff0c;原…
阅读更多...
服务器异常数据问题解决 工具（tcpdump+wireshark+iptables）

服务器异常数据问题解决 工具（tcpdump+wireshark+iptables）

问题&#xff1a; 某天一客户反馈&#xff0c;后台页面上显示的设备数据异常增长。现场实际只有2w台设备安装了助手(客户端)&#xff0c;但是后台显示有16w的助手设备&#xff0c;并且还在持续且快速的增长。这些数据会被加载到缓存&#xff0c;时间久了&#xff0c;服务端程序…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023