22 React + TSX 前端开发系列教程 - 表单处理之受控与非受控组件

在前一篇教程中，我们探讨了如何使用 Hooks 创建自定义 Hooks，这为我们的组件赋予了更好的复用性和逻辑分离。在本篇中，我们将深入了解 React 中的受控组件和非受控组件，这是实现表单处理的两种重要方式。

受控组件

受控组件（Controlled Components）是指其内部状态由 React 组件的状态所控制的组件。在这类组件中，表单元素的值是通过 React 的 state 管理的，用户输入会通过事件处理程序更新该 state。

示例：受控组件的简单实现

import React, { useState } from 'react';

const ControlledForm: React.FC = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event: React.FormEvent) => {
    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;

在上面的例子中，我们创建了一个 ControlledForm 组件。inputValue 这个状态用于控制文本输入框的值。每当用户输入内容时，handleChange 函数会被触发，从而更新组件的状态，确保了组件始终保持同步。

非受控组件

非受控组件（Uncontrolled Components）则是指其内部状态不由 React 管理，表单元素的值通过 DOM 元素本身来访问，而非通过 React 的 state。这样，我们通常使用 ref 来直接访问 DOM。

示例：非受控组件的简单实现

import React, { useRef } from 'react';

const UncontrolledForm: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    if (inputRef.current) {
      alert(`表单提交的值：${inputRef.current.value}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        输入内容：
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">提交</button>
    </form>
  );
};

export default UncontrolledForm;

在这个非受控组件的示例中，我们使用了 useRef 来创建一个引用，指向输入框的 DOM 元素。在提交表单时，我们直接访问这个引用的值，而不需要通过组件的 state。

受控与非受控组件的比较

特性	受控组件	非受控组件
数据来源	组件的 state	DOM 节点的值
更新方式	通过事件处理函数	通过 ref
常见场景	需要实时校验、联动等功能时	简单表单，或不需要 React 管理时
测试	更容易，因为状态在组件内管理	需要访问 DOM 元素

何时使用受控组件与非受控组件

• 受控组件通常更适合需要动态反应用户输入的场景，比如表单验证、输入的实时显示等。
• 非受控组件则适合一些简单的场景，例如只需要获取值但不需要持续监控的表单，或在需要频繁进行性能优化时（因为受控组件更频繁地更新 state）。

结论

在 React 中，选择使用受控组件还是非受控组件取决于你的应用需求和场景。在本篇教程中，我们了解了这两种组件的基本概念、实现方式及其优缺点。掌握受控与非受控组件的用法能帮助我们更好地处理用户输入，提升表单交互的灵活性和便捷性。

在下一篇教程中，我们将继续深挖表单处理的另一个重要方面——如何处理用户输入，使得我们的表单更加智能与友好。敬请期待！