跳到主要内容

受控组件表单

在 React 中，表单处理是一个常见的任务。React 提供了一种称为“受控组件”的方式来管理表单输入。本文将详细介绍什么是受控组件，以及如何在 React 中使用它们来处理表单数据。

什么是受控组件？​

受控组件是指表单元素（如 <input>、<textarea> 和 <select>）的值由 React 的状态（state）来控制的组件。换句话说，表单元素的值不再由 DOM 自身管理，而是由 React 的状态来管理。这使得 React 能够实时跟踪和更新表单的值。

为什么使用受控组件？​

使用受控组件的主要优点是：

  1. 实时数据管理：React 可以实时跟踪表单输入的变化，并在需要时更新 UI。
  2. 数据验证：可以在用户输入时进行数据验证，提供即时反馈。
  3. 统一数据源：表单数据存储在 React 的状态中，便于管理和提交。

如何实现受控组件？​

要实现受控组件，你需要做以下几步：

  1. 定义状态：使用 useState 钩子来定义表单元素的值。
  2. 绑定状态：将状态绑定到表单元素的 value 属性。
  3. 处理输入变化：为表单元素添加 onChange 事件处理程序，以更新状态。

示例代码​

以下是一个简单的受控组件表单示例：

import React, { useState } from 'react';

function ControlledForm() {
  const [name, setName] = useState('');

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

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

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

export default ControlledForm;

代码解释​

  1. 状态定义：const [name, setName] = useState(''); 定义了一个名为 name 的状态变量，初始值为空字符串。
  2. 绑定状态：<input type="text" value={name} onChange={handleChange} /> 将 name 状态绑定到输入框的 value 属性。
  3. 处理输入变化：handleChange 函数在用户输入时更新 name 状态。

输出​

当用户在输入框中输入内容并点击提交按钮时，会弹出一个警告框，显示用户输入的名字。

实际应用场景​

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

  1. 表单验证：在用户输入时实时验证数据，例如检查电子邮件格式是否正确。
  2. 动态表单：根据用户输入动态生成或修改表单字段。
  3. 复杂表单：处理包含多个输入字段的表单，确保所有字段的值都存储在 React 的状态中。

示例：表单验证​

以下是一个带有简单验证的受控组件表单示例：

import React, { useState } from 'react';

function ValidatedForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleChange = (event) => {
    const value = event.target.value;
    setEmail(value);
    if (!value.includes('@')) {
      setError('请输入有效的电子邮件地址');
    } else {
      setError('');
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (email.includes('@')) {
      alert(`提交的电子邮件是: ${email}`);
    } else {
      alert('请先输入有效的电子邮件地址');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        电子邮件:
        <input type="text" value={email} onChange={handleChange} />
      </label>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

export default ValidatedForm;

代码解释​

  1. 状态定义：const [email, setEmail] = useState(''); 和 const [error, setError] = useState(''); 分别定义了电子邮件和错误信息的状态。
  2. 验证逻辑：在 handleChange 函数中，检查电子邮件是否包含 @ 符号，如果不包含则设置错误信息。
  3. 显示错误信息：如果 error 状态不为空，则在表单下方显示错误信息。

总结​

受控组件是 React 中处理表单输入的一种强大方式。通过将表单元素的值绑定到 React 的状态，你可以轻松地管理和验证用户输入。本文介绍了如何实现受控组件，并提供了实际应用场景的示例。

附加资源​

练习​

  1. 创建一个包含多个输入字段（如姓名、电子邮件、密码）的受控组件表单。
  2. 在表单中添加实时验证逻辑，确保所有字段都符合要求。
  3. 尝试使用受控组件实现一个动态表单，根据用户的选择动态添加或删除输入字段。
提示

在实现受控组件时，确保每个表单元素都有一个唯一的 name 属性，以便在提交表单时能够正确识别和处理每个字段。