22 表单处理之受控组件与非控制组件

在这一章中，我们将深入探讨 React 中的表单处理，特别是受控组件和非受控组件。我们会通过具体的案例来理解这两种组件的区别及其使用场景。

受控组件

受控组件是指 React 的组件完全控制表单元素的值。也就是说，表单的输入值由 React 组件的状态管理。在受控组件中，每次用户输入都会触发一个事件，这个事件会更新组件的状态，从而让表单的显示内容与状态保持同步。

示例：受控组件实现

让我们先来看看一个简单的受控组件示例：

import React, { useState } from "react";

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

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`提交的名字是: ${inputValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        姓名:
        <input type="text" value={inputValue} onChange={handleChange} />
      </label>
      <button type="submit">提交</button>
    </form>
  );
}

export default ControlledForm;

在这个示例中，inputValue 是一个状态，我们使用 useState 钩子来管理它。每当用户在输入框中输入内容时，handleChange 方法会被调用，它会更新 inputValue 的状态。当我们提交表单时，handleSubmit 方法会显示用户输入的值。

非受控组件

与受控组件相比，非受控组件并不直接通过 React 的状态来控制表单元素的值。相反，非受控组件使用 ref 来访问表单元素的值。非受控组件更接近于传统 HTML 的表单处理方式。

示例：非受控组件实现

下面是一个简单的非受控组件的示例：

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;

在这个非受控组件的例子中，我们使用了 useRef 钩子来创建一个对输入元素的引用。当表单被提交时，我们可以直接通过 inputRef.current.value 来访问输入框的值，而不是使用组件的状态来管理它。

受控组件与非受控组件的比较

特点	受控组件	非受控组件
数据管理	数据由组件状态管理	数据由 DOM 管理
直观性	需要通过状态更新来获取输入值	直接通过 ref 访问值
适用场景	复杂表单，交互，验证	简单表单，性能优化
处理方式	事件处理及状态同步	事件处理，使用 ref

受控组件通常在需要实时获取表单数据或进行复杂处理时更有优势，而非受控组件在处理简单输入或不需要实时数据时可以提供更好的性能。

总结

在本章中，我们详细讨论了受控组件与非受控组件的区别和使用场景。选择适合的方式来处理表单输入是 React 开发中的一个重要部分。接下来的章节，我们将学习如何处理表单输入及验证，这将使我们的表单变得更加动态和交互。

通过这些概念的掌握，相信你在处理 React 表单时会更加得心应手。