【React】详解受控表单绑定

文章目录

- 一、受控组件的基本概念
- - 1. 什么是受控组件？
  - 2. 受控组件的优势
  - 3. 基本示例
  - - 导入和初始化
    - 定义函数组件
    - 处理输入变化
    - 处理表单提交
    - 渲染表单
    - 导出组件
- 二、受控组件的进阶用法
- - 1. 多个输入框的处理
  - - 使用多个状态变量
    - 使用一个对象管理状态
  - 2. 处理选择框（select）和复选框（checkbox）
  - - 选择框
    - 复选框
- 三、受控组件的常见问题
- - 1. 表单重置
  - 2. 实时校验

在React开发中，表单是非常常见的需求。为了实现表单的灵活控制和状态管理，受控组件的使用尤为重要。本文将深入探讨React中受控表单的绑定方法，包括基本用法、常见问题以及高级应用。通过本文，你将全面了解如何在React中使用受控表单，从而提升表单处理的效率和用户体验。

一、受控组件的基本概念

1. 什么是受控组件？

受控组件是指表单元素的值由React组件的状态控制，而不是由DOM自己维护。通过在组件状态和表单元素之间建立绑定，React可以完全控制表单的行为和显示内容。

2. 受控组件的优势

单一数据源：表单数据和组件状态保持同步，数据源统一，便于管理。
实时校验：可以在用户输入时进行实时校验，提升用户体验。
便于调试：状态可控，便于调试和测试。

3. 基本示例

以下是一个简单示例，展示如何使用受控组件来处理表单输入：

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的状态由React组件的状态管理，handleChange函数更新状态，使输入框的值与状态保持同步。

导入和初始化

import React, { useState } from 'react';

这行代码从react库中导入React和useState。useState是一个React Hook，用于在函数组件中添加状态。

定义函数组件

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

ControlledForm是一个函数组件。组件内部使用useState Hook 创建了一个名为inputValue的状态变量和一个更新状态的函数setInputValue。初始状态为一个空字符串。

处理输入变化

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

handleChange是一个事件处理函数，用于处理输入框内容的变化。它接受一个事件对象event作为参数，通过event.target.value获取输入框的当前值，并使用setInputValue更新组件的状态。

处理表单提交

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

handleSubmit是一个事件处理函数，用于处理表单的提交。它接受一个事件对象event作为参数，并调用event.preventDefault()阻止默认的表单提交行为。然后，通过alert函数弹出一个提示框，显示当前的输入值inputValue。

渲染表单

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

return语句返回JSX，用于渲染表单。表单包含以下几个元素：

<form onSubmit={handleSubmit}>：定义一个表单，并将handleSubmit函数绑定到表单的onSubmit事件上。当表单提交时，将调用handleSubmit函数。
<label>：定义一个标签，包含一个输入框和说明文字。
- <input type="text" value={inputValue} onChange={handleChange} />：定义一个文本输入框。value属性绑定到组件的状态inputValue，确保输入框的值始终与状态同步。onChange事件绑定到handleChange函数，当输入框内容变化时，调用handleChange函数更新状态。
<button type="submit">提交</button>：定义一个提交按钮。当按钮被点击时，表单将尝试提交，并触发handleSubmit函数。

导出组件

export default ControlledForm;

最后，通过export default导出ControlledForm组件，使其可以在其他文件中导入和使用。

二、受控组件的进阶用法

1. 多个输入框的处理

在实际应用中，表单往往包含多个输入框。可以通过使用多个状态变量或一个对象来管理多个输入框的值。

使用多个状态变量

import React, { useState } from 'react';

function MultiInputForm() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const handleFirstNameChange = (event) => {
    setFirstName(event.target.value);
  };

  const handleLastNameChange = (event) => {
    setLastName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`提交的值: ${firstName} ${lastName}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名字：
        <input type="text" value={firstName} onChange={handleFirstNameChange} />
      </label>
      <br />
      <label>
        姓氏：
        <input type="text" value={lastName} onChange={handleLastNameChange} />
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
}

export default MultiInputForm;

使用一个对象管理状态

import React, { useState } from 'react';

function MultiInputForm() {
  const [formValues, setFormValues] = useState({ firstName: '', lastName: '' });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormValues({
      ...formValues,
      [name]: value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`提交的值: ${formValues.firstName} ${formValues.lastName}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名字：
        <input
          type="text"
          name="firstName"
          value={formValues.firstName}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        姓氏：
        <input
          type="text"
          name="lastName"
          value={formValues.lastName}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
}

export default MultiInputForm;

状态初始化

const [formValues, setFormValues] = useState({ firstName: '', lastName: '' });

useState Hook 用于声明组件的状态变量formValues，它是一个对象，包含两个属性：firstName和lastName，初始值均为空字符串。
setFormValues 是更新状态的函数。

处理输入变化的函数

const handleChange = (event) => {
  const { name, value } = event.target;
  setFormValues({
    ...formValues,
    [name]: value,
  });
};

handleChange 是一个事件处理函数，当输入字段的值发生变化时调用。
event 是事件对象，其中event.target指向触发事件的元素（即输入字段）。
{ name, value } = event.target 是使用解构赋值从event.target中提取name

和value属性。
- name 是输入字段的名称属性，对应formValues中的键（即firstName或lastName）。
- value 是输入字段的当前值。
setFormValues函数使用展开运算符...复制formValues对象的现有属性，并更新对应输入字段的值：
- 这样做的目的是保持 formValues 中现有的其他属性不变，仅更新需要修改的属性。
- [name]: value 动态地根据输入字段的名称属性设置formValues对象中的值。

处理表单提交的函数

const handleSubmit = (event) => {
  event.preventDefault();
  alert(`提交的值: ${formValues.firstName} ${formValues.lastName}`);
};

handleSubmit 是一个事件处理函数，当表单被提交时调用。
event.preventDefault() 用于阻止表单的默认提交行为，以便在JavaScript中处理表单数据。
alert 函数弹出一个对话框，显示提交的firstName和lastName值。

2. 处理选择框（select）和复选框（checkbox）

受控组件不仅适用于文本输入框，还可以用于选择框和复选框。

选择框

import React, { useState } from 'react';

function SelectForm() {
  const [selectedValue, setSelectedValue] = useState('option1');

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`选择的值: ${selectedValue}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        选择：
        <select value={selectedValue} onChange={handleChange}>
          <option value="option1">选项1</option>
          <option value="option2">选项2</option>
          <option value="option3">选项3</option>
        </select>
      </label>
      <button type="submit">提交</button>
    </form>
  );
}

export default SelectForm;

复选框

import React, { useState } from 'react';

function CheckboxForm() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = (event) => {
    setIsChecked(event.target.checked);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`复选框状态: ${isChecked}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        复选框：
        <input type="checkbox" checked={isChecked} onChange={handleChange} />
      </label>
      <button type="submit">提交</button>
    </form>
  );
}

export default CheckboxForm;

三、受控组件的常见问题

1. 表单重置

在某些情况下，我们需要在表单提交后重置表单的状态。可以通过将状态重置为初始值来实现。

import React, { useState } from 'react';

function ResettableForm() {
  const initialFormState = { firstName: '', lastName: '' };
  const [formValues, setFormValues] = useState(initialFormState);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormValues({
      ...formValues,
      [name]: value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`提交的值: ${formValues.firstName} ${formValues.lastName}`);
    setFormValues(initialFormState); // 重置表单
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名字：
        <input
          type="text"
          name="firstName"
          value={formValues.firstName}
          onChange={handleChange}
        />
      </label>
      <br />
      <label>
        姓氏：
        <input
          type="text"
          name="lastName"
          value={formValues.lastName}
          onChange={handleChange}
        />
      </label>
      <br />
      <button type="submit">提交</button>
    </form>
  );
}

export default ResettableForm;

2. 实时校验

在表单中进行实时校验可以提高用户体验，防止提交无效数据。

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 (!/\S+@\S+\.\S+/.test(value)) {
      setError('无效的邮箱地址');
    } else {
      setError('');
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!error) {
      alert(`提交的邮箱: ${email}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        邮箱：
        <input type="email" value={email} onChange={handleChange} />
      </label>
      <br />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit" disabled={!!error}>
        提交
      </button>
    </form>
  );
}

export default ValidatedForm;