跳到主要内容

Next.js 非受控组件

在 React 和 Next.js 中，表单处理是开发中的常见任务。表单处理通常有两种方式：受控组件和非受控组件。本文将重点介绍 非受控组件，并展示如何在 Next.js 中使用它们。

什么是非受控组件？​

非受控组件是指表单数据由 DOM 本身管理，而不是由 React 状态管理。换句话说，表单输入的值直接从 DOM 元素中获取，而不是通过 React 的状态（state）来存储和更新。

与受控组件不同，非受控组件不需要为每个输入字段维护一个状态变量。这使得非受控组件在某些场景下更加简单和高效。

提示

非受控组件适用于以下场景：

  • 表单简单，不需要复杂的验证逻辑。
  • 表单数据仅在提交时使用，不需要实时更新。

非受控组件的基本用法​

在非受控组件中，我们通常使用 ref 来访问 DOM 元素的值。以下是一个简单的示例，展示了如何在 Next.js 中使用非受控组件处理表单数据。

jsx
import { useRef } from 'react';

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

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

  return (
    <form onSubmit={handleSubmit}>
      <label>
        输入你的名字:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">提交</button>
    </form>
  );
}

代码解析​

  1. useRef：我们使用 useRef 钩子来创建一个引用（ref），并将其绑定到输入字段上。
  2. inputRef.current.value：在表单提交时，我们通过 inputRef.current.value 获取输入字段的值。
  3. handleSubmit：在提交表单时，阻止默认行为并显示输入的值。
备注

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（null）。这个对象在整个组件的生命周期内保持不变。

非受控组件的实际应用场景​

非受控组件非常适合处理简单的表单，例如登录表单、搜索框等。以下是一个更复杂的示例，展示了如何在 Next.js 中使用非受控组件处理多个输入字段。

jsx
import { useRef } from 'react';

export default function MultiInputForm() {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    const name = nameRef.current.value;
    const email = emailRef.current.value;
    alert(`姓名: ${name}, 邮箱: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        姓名:
        <input type="text" ref={nameRef} />
      </label>
      <br />
      <label>
        邮箱:
        <input type="email" ref={emailRef} />
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
}

代码解析​

  1. 多个 ref：我们为每个输入字段创建了一个 ref，分别用于获取姓名和邮箱的值。
  2. 表单提交：在提交表单时，我们通过 ref.current.value 获取每个输入字段的值，并将其显示在警告框中。
警告

虽然非受控组件在某些场景下非常方便，但它们不适合需要实时验证或动态更新的表单。在这些情况下，建议使用受控组件。

非受控组件与受控组件的对比​

为了更好地理解非受控组件，我们可以将其与受控组件进行对比。

特性非受控组件受控组件
数据管理由 DOM 管理由 React 状态管理
实时更新不支持支持
适合场景简单表单，无需实时验证复杂表单，需要实时验证
代码复杂度较低较高
注意

选择非受控组件还是受控组件取决于具体的需求。如果表单逻辑复杂，建议使用受控组件。

总结​

非受控组件是一种简单且高效的表单处理方式，特别适合处理不需要实时更新的简单表单。通过使用 ref，我们可以直接从 DOM 中获取表单数据，而不需要维护复杂的状态逻辑。

在实际开发中，非受控组件可以用于登录表单、搜索框等场景。然而，对于需要实时验证或动态更新的表单，建议使用受控组件。

附加资源与练习​

通过本文的学习，你应该已经掌握了如何在 Next.js 中使用非受控组件处理表单数据。继续练习并探索更多 React 和 Next.js 的功能吧！