跳到主要内容

非受控组件表单

在 React 中，表单处理是开发中常见的任务之一。React 提供了两种主要的方式来处理表单输入：受控组件和非受控组件。本文将重点介绍非受控组件表单，并帮助你理解其工作原理和使用场景。

什么是非受控组件？​

非受控组件是指表单数据由 DOM 本身处理，而不是由 React 状态管理的组件。换句话说，表单的输入值直接由 DOM 元素存储，而不是通过 React 的状态来管理。这种方式类似于传统的 HTML 表单处理。

备注

非受控组件通常用于简单的表单场景，或者当你不需要对表单输入进行实时验证或处理时。

非受控组件的基本用法​

在非受控组件中，我们通常使用 ref 来直接访问 DOM 元素，从而获取表单输入的值。以下是一个简单的例子：

jsx
import React, { useRef } from 'react';

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>
  );
}

export default UncontrolledForm;

代码解释​

  1. useRef: 我们使用 useRef 钩子来创建一个引用 (inputRef)，并将其绑定到输入框上。
  2. handleSubmit: 在表单提交时，我们通过 inputRef.current.value 获取输入框的值，并显示在警告框中。
  3. ref: 我们将 inputRef 绑定到 <input> 元素上，这样我们就可以在提交表单时访问输入框的值。
提示

使用 ref 可以让你直接操作 DOM 元素，这在某些场景下非常有用，比如集成第三方库或处理文件上传。

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

非受控组件在以下场景中非常有用：

  1. 简单的表单: 当你只需要获取表单输入的值，而不需要实时验证或处理时。
  2. 文件上传: 文件输入通常是非受控的，因为文件数据由浏览器处理。
  3. 集成第三方库: 当你需要与第三方库（如日期选择器）集成时，非受控组件可以更方便地操作 DOM。

文件上传示例​

以下是一个文件上传的非受控组件示例：

jsx
import React, { useRef } from 'react';

function FileUploadForm() {
  const fileInputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    const file = fileInputRef.current.files[0];
    if (file) {
      alert('选择的文件是: ' + file.name);
    } else {
      alert('请选择一个文件');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        上传文件:
        <input type="file" ref={fileInputRef} />
      </label>
      <button type="submit">提交</button>
    </form>
  );
}

export default FileUploadForm;

代码解释​

  1. fileInputRef: 我们使用 useRef 创建一个引用，并将其绑定到文件输入框上。
  2. handleSubmit: 在表单提交时，我们通过 fileInputRef.current.files[0] 获取用户选择的文件，并显示文件名。
警告

在处理文件上传时，确保对文件类型和大小进行验证，以防止潜在的安全问题。

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

特性非受控组件受控组件
数据管理由 DOM 管理由 React 状态管理
实时验证不支持支持
适用场景简单表单、文件上传、第三方库集成复杂表单、实时验证、动态表单
代码复杂度较低较高
注意

虽然非受控组件在某些场景下非常方便，但在需要实时验证或动态表单处理时，建议使用受控组件。

总结​

非受控组件是 React 中处理表单的一种简单而有效的方式，特别适用于不需要实时验证或处理的场景。通过使用 ref，我们可以直接访问 DOM 元素并获取表单输入的值。然而，在复杂的表单场景中，受控组件可能更为合适。

附加资源与练习​

通过本文的学习，你应该已经掌握了非受控组件的基本概念和使用方法。继续练习并探索更多 React 表单处理的技巧吧！