以新视角理解 React 表单输入：全面剖析受控与非受控

2024-02-13 21:51:11

在 React 中处理表单输入：受控与非受控

在 React 中，处理表单输入有两种主要方式：受控表单和非受控表单。每种方式都有其优缺点，适合不同的使用场景。

受控表单

在受控表单中，表单元素的值由 React 组件的状态管理。当用户在表单中输入或选择值时，React 组件会更新其状态，从而导致表单元素的值发生变化。受控表单通常使用 state 和 onChange 事件处理程序来实现。

import React, { useState } from "react";

function ControlledForm() {
  const [value, setValue] = useState("");

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

  return (
    <form>
      <input type="text" value={value} onChange={handleChange} />
      <input type="submit" value="Submit" />
    </form>
  );
}

export default ControlledForm;

在上面的示例中，value 状态变量用于存储表单输入的值。当用户在输入框中输入内容时，onChange 事件处理程序被触发，并更新 value 状态变量。这导致输入框的值发生变化，并且 React 组件重新渲染。

非受控表单

在非受控表单中，表单元素的值由表单元素本身管理。React 组件不跟踪表单元素的值，而是通过引用（ref）来访问表单元素并获取或设置值。非受控表单通常使用 ref 和 onSubmit 事件处理程序来实现。

import React, { useRef } from "react";

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <input type="submit" value="Submit" />
    </form>
  );
}

export default UncontrolledForm;

在上面的示例中，inputRef 是一个引用（ref），指向输入框元素。当用户在输入框中输入内容时，React 组件不会跟踪该值。但是，我们可以通过 inputRef.current.value 来获取输入框的当前值。当用户提交表单时，onSubmit 事件处理程序被触发，并打印输入框的值到控制台。

受控与非受控表单的区别

特征	受控表单	非受控表单
数据绑定	由 React 组件状态管理	由表单元素本身管理
事件处理	使用 `onChange` 事件处理程序	使用 `ref` 和 `onSubmit` 事件处理程序
优点	表单状态更容易管理和验证	表单元素更独立，不需要 React 组件的状态
缺点	表单元素的值需要在 React 组件中显式更新	表单元素的值需要通过引用（ref）获取，可能会增加组件的复杂性