【React】详解受控表单绑定

最新推荐文章于 2024-09-30 18:55:14 发布
最新推荐文章于 2024-09-30 18:55:14 发布
阅读量444 收藏 10
点赞数 5
分类专栏： # react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lph159/article/details/140721523
版权

文章目录

在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;

在这里插入图片描述

Peter-Lu
关注
专栏目录
【React】3、受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？）
Coding and studying
05-24 980
系列文章目录 React入门与概览（JSX语法） 面向组件编程——组件实例的三大核心属性state、props和refs超详解 受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？） 文章目录系列文章目录受控组件和非受控组件理解示例效果非受控组件编码受控组件编码 受控组件和非受控组件 理解 包含表单的组件分类 受控组件 非受控组件 示例效果 需求: 定义一个包含表单的组件 输入用户名密码后,点击登录提示输入信息 非受控组件编码 <script type="text/babe
react18【系列实用教程】双向绑定表单 （2024最新版）含受控组件、非受控组件、单行多行输入框 input，下拉选择 select，单选 radio，多选 checkbox，标签 label
朝阳39的博客
05-10 398
类似 vue 中的 v-model。
React 第三节 向数据绑定及表单处理
weixin_42549581的博客
06-19 155
今日分享： React 双向数据绑定 表单处理 公共方法 表单 约束性和非约束性组件（受限/非受限） <input type="text" value="123" /> //非约束性 value由原生的DOM管理 <input type="text" defaultValue="123" /> //约束性 由react管理了 value （value不再是死值，动态的处理）...
react表单双向绑定处理
量子前端的博客
10-10 2178
react中处理表单双向绑定的方法： constructor() { super() this.state = { commentData: [{ name: '冯昕', text: '说自己是大帅哥', id: 1 }], addComponentPerson: '', addCom
React（七）表单元素的绑定
小羽苏的博客
12-24 915
vue中通过v-model就可以双向绑定上表单元素，react需要自己去操作，这里就看一下怎样去绑定input，checkbox，select等元素
react form 绑定值
yhwcool的博客
11-21 2146
react form 表单 一般的表单应用其实不需要实时监控表单项的用户输入，用 defaultValue   如果需要数据的双向绑定那么需要value,onChange方法的联合使用 import React from 'react'; import './../assets/css/form.css' export default class ReactForm extends Rea...
React详解
weixin_43852916的博客
12-22 1116
React的安装和配置 https://zh-hans.reactjs.org/docs/getting-started.html JSX 简介 const element = <h1>Hello, world!</h1>; 它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。 在 JSX
React-class——React表单与事件（受控组件与非受控组件、事件类型、事件对象、事件绑定）、React组件生命周期、面试
qq_52301431的博客
10-12 1067
时，一般都要为表单元素传入应用状态中的值，我们需要根据表单元素中用户的输入，对应用数据进行相应的操作和改变。- React对原生的事件系统也进行了封装，在React中的事件对象实际上是一个跨浏览器的**虚拟事件对象** ，它拥有和原生事件对象相同的属性和方法。受控组件的值由props或state传入给受控组件（表单的输入框），用户在元素上交互或输入内容会引起应用state的改变。在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到**
React.js 表单处理：受控组件与非受控组件
本文将介绍React.js中表单处理的基础知识，包括受控组件和非受控组件的概念、创建和使用方法，以及它们之间的比较和使用场景。 ## 1.2 目的和背景 在Web应用开发中，表单是不可或缺的一部分，用户输入的数据需要被...
详解在React中跨组件分发状态的三种方法
10-18
通过将React组件的状态与表单的值绑定，并通过事件处理函数来更新这些状态，实现对表单输入的完全控制。 在我们的书籍管理例子中，`<BookForm/>`组件就采用了受控组件的模式。它接收`<BookApp/>`传入的`book`对象...
React学习二（组件详解）
qq_44872688的博客
03-12 1498
文章目录一、React数据流二、组件的三大特性1、属性（props）（1）React Props默认值与标签属性限制（2）应用-React组件切分与提取2、状态（state）（1）state的定义（2）更新状态3、生命周期（1）挂载（2）数据更新过程（3）卸载 一、React数据流       在 React 中，数据是自顶向下单向流动的，即从父组件到子组件。       state 与
react 表单-双向绑定的实现
LX@2019的博客
03-28 2141
react 表单  双向绑定的实现 在 react 开发中，经常遇到 input 输入框改变值的时候，要定义一个函数，该函数内部执行 setState 的操作，才能改变 input 的值。如果表单元素多了以后，就会定义很多的这种函数，使代码变得冗余。下面在 react 中实现一个类似于 vue 的表单双向绑定的逻辑。 修改表单的值，只需如下操作： this.state.inputval = ...
React入门第四弹——数据绑定及表单处理
weixin_45745641的博客
03-09 973
文章目录前言表单元素受限组件和不受限组件常用表单数据绑定注册功能实现 前言 上篇文章讲了react中有状态组件以及事件处理，今天给大家上个小项目——表单提交，里面会涉及到很多新的知识点，下面我们一起来学习~ 表单元素 像<input>、<textarea>、<option>这样的表单元素不同于其他元素,因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易。 交互属性,用户对以下元素做出交互时通过onChange回调函数来监听组件变化。
React&JSX使用
CherishTaoTao的博客
09-30 1158
在 React 开发中，除了 JSX 的基础使用，还有一些常见的注意事项和 JSX 的进阶用法。以下是需要重点注意的 React 开发技巧和。
react-问卷星项目（2）
BHDDGT的博客
09-29 1120
一个git hook 工具，即在git commit之前执行自定义的命令，将规范流程化，如执行代码风格的检查，避免提交非规范的代码，在github搜索即可。这两条是接着执行的，表示创建husky，在文档说明里也有，我按照视频里的指令执行会显示初始化失败，这两条我自己用的没问题。
从0学习React（4）---更新组件状态setState
qq_54432917的博客
09-29 541
在上篇文章中，我们讲了React中的一些基础，包括组件的种类以及state的使用。上篇文章的结尾，我们讲到了如何更新组件的状态（使用setState）。但是我没有讲的很详细，这篇文章我们详细的讲一下React中如何更新组件的状态。
React响应式修改数组和对象
最新发布
警警的博客
09-30 805
React的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。你不能直接修改对象中的属性，而是需要创建一个新的对象来更新状态。不可变性（Immutability）：React中的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。避免直接修改状态：React的状态是不可变的，直接修改状态（如this.state.items.push(4)）不会触发重新渲染，因为React无法检测到这种变化。// 修改name属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Peter-Lu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值