剖析 React 表单：有控与无控输入详解

2023-09-24 16:30:44

在 React 中处理表单输入时，您可以选择使用受控或非受控输入。这两种方法各有优缺点，在不同的场景下发挥着不同的作用。本文将深入解析受控和非受控输入的差异，帮助您在开发中做出明智选择。

受控表单输入

在受控表单输入中，表单元素的值由 React 组件的状态控制。这意味着当用户在表单元素中输入数据时，React 组件会跟踪这些数据的变化，并更新组件的状态。这种方式的好处在于，React 可以随时访问表单元素的当前值，并对用户交互做出及时的响应。

实现方式：

import React, { useState } from "react";

const MyForm = () => {
  const [name, setName] = useState("");

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

  return (
    <form>
      <label htmlFor="name">Name:</label>
      <input id="name" type="text" value={name} onChange={handleChange} />
    </form>
  );
};

export default MyForm;

优点：

允许您轻松控制表单元素的值。
方便处理表单验证，因为您可以随时访问表单元素的当前值。
易于实现表单数据与其他组件共享。

缺点：

需要在组件中定义和管理状态，增加了组件的复杂度。
如果表单元素的数量很多，管理起来可能会比较繁琐。

非受控表单输入

在非受控表单输入中，表单元素的值由 DOM 元素本身控制。这意味着当用户在表单元素中输入数据时，React 组件不会跟踪这些数据的变化。这种方式的优点在于，表单元素可以独立于 React 组件而存在，简化了组件的实现。

实现方式：

import React from "react";

const MyForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    const name = event.target.querySelector("input[name='name']").value;
    console.log(name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input id="name" type="text" name="name" />
      <input type="submit" value="Submit" />
    </form>
  );
};

export default MyForm;