React多表单元素优化(受控组件)

最新推荐文章于 2023-04-12 11:07:26 发布
最新推荐文章于 2023-04-12 11:07:26 发布
阅读量286 收藏
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lonsole/article/details/121133398
版权
本文介绍了React中优化多表单元素的方法，包括为表单元素添加与state匹配的name属性，根据元素类型获取值，以及利用change事件通过[name]更新对应的state值。
摘要由CSDN通过智能技术生成

1、给表单元素添加name属性，名称与state相同
2、根据表单元素类型获取对应值
3、在change事件处理程序中通过 [name] 来修改对应的state的值

state={
   
	txt:'',
	city:'bj',
	isChecked:false
}

handleForm = (e) => {
   
	//获取当前DOM对象
最低0.47元/天 解锁文章
--北海道的夏天不会说再见--
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-面向复杂场景的中后台表单解决方案UForm
08-15
面向复杂场景的中后台表单解决方案，UForm 谐音 Your Form，代表，这才是你想要的 Form 解决方案
深入理解 form 系列（二）-- React 表单的优化
weixin_33795093的博客
10-09 495
React Form 在构建 web 应用的时候，为了采集用户输入，表单变成了我们不可或缺的东西。大型项目中，如果没有对表单进行很好的抽象和封装，随着表单复杂度和数量的增加，处理表单将会变成一件令人头疼的事情。在 react 里面处理表单，一开始也并不容易。所以在这篇文章中，我们会介绍一些简单的实践，让你能够在 react 里面更加轻松的...
React中的表单元素
qq_32021031的博客
09-20 243
在web应用开发当中，表单还是很重要的元素。 1.应用表单组件有：文本框（input、textarea）、单选按钮和复选框、Select组件。 文本框：文本框的状态改变即文本框中的内容的改变。此时的state应该是inputValue或者是textareaValue。在状态改变时的处理函数应该是handleInputChange(e){ this.setState({
React 表单绑定传值的优化
qq_40852667的博客
01-25 654
原始代码 在一些input事件中 像比如 onchange onclick oninput … 这些事件所绑定的值 都是一个回调函数 我们可以发现。当我们绑定的函数如果没有括号执行的时候 此时该函数可拿到该事件的 event 参数 如下： <input onChange="this.handleChange" type="text" /> handleChange = (e) => { console.log(e.target.value) // 此时输出的结果是用户输入的结果 }
【React】5.表单处理-受控组件
没啥简介
05-15 400
受控组件，非受控组件，表单事件绑定，解构赋值
浅谈react受控组件与非受控组件(小结)
08-28
React 中的受控组件和非受控组件是两种不同的表单组件类型，它们之间的区别在于是否可以由外部控制组件的值。本文将详细介绍受控组件和非受控组件的概念、特点和使用场景。 一、非受控组件 非受控组件是一种不受...
React 使用Hooks简化受控组件的状态绑定
12-11
在React开发中，受控组件是一种常见的处理表单数据的方式，它是指表单元素的状态完全由React组件的state控制。这种方式使得数据校验和管理变得简单且统一。然而，在使用类组件时，处理受控组件的状态绑定可能会变得...
浅谈React深度编程之受控组件与非受控组件
08-28
例如，在一个简单的列表视图中，可能只需要使用非受控组件来展示数据，而在一个复杂的表单中，可能需要使用受控组件来控制表单的行为。 React 中的受控组件和非受控组件是两个非常重要的概念，它们可以帮助开发者更...
(精华)2020年7月31日 React 虚拟dom的渲染机制和性能调优
热门推荐
时光隧道
07-31 54万+
//-------------------------1----------------------------- function Table ({rows}) { return ( <table> { rows.map(row=>( <tr> <t
在react antd中动态生成多个 form表单组，包括一个动态添加/删除表单项的功能和一个提交表单的功能
weixin_38791717的博客
04-12 4824
方法，动态添加一个新的表单项。当用户提交表单时，将会调用。属性来指定占位文本。在每个表单项的最后，我们使用。组件来实现删除表单项的功能。在表单的最后，我们使用。方法，打印所有表单项的内容。在输入框中，我们使用。组件来实现提交表单的功能。方法循环渲染每个表单项，并使用。组件来动态生成多个表单项。属性指定表单项的名称，使用。在这个示例中，我们首先使用。组件包裹每个表单项。
React组件基础
liuyuhua666的博客
07-16 164
1. React 组件介绍 组件是 React 的一等公民，使用 React 就是在用组件 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点：可复用、独立、可组合 2. React 组件的两种创建方式 使用函数创建组件 使用类创建组件 2.1 使用函数创建组件 函数组件：使用 JS 的函数（或箭头函数）创建的组件 约定1：函数名称必须以大写字母开头 约定2：函数组件必须有返...
react页面中存在多个input时巧妙设置value属性
baidu_38027860的博客
09-21 1万+
笔者以前是一直在用jquery进行开发的，才转react没多长时间，对别的倒是没什么感触，就是这个input输入框是深深的抵触，感觉很烦人，简单的一个输入框，你就必须要设置changeValue的方法去给input加上，这样你输入的内容才能够正确的展示到UI页面中，也因此，如果你页面中存在多个input时，简直就是噩梦了，因为你首先要为这些所有的input框绑定上onChange的方法，然后还需要...
【React】表单处理
DomCode
02-18 618
我们在开发过程中，经常需要操作表单元素，比如获取表单的值或者是设置表单的值。 react中处理表单元素有两种方式： 受控组件-表单元素的value受到state的控制，（类似Vue中的v-model） 非受控组件（DOM操作） 受控组件基本概念 React中将state中的数据与表单元素的value值绑定到了一起，由state的值来控制表单元素的值，但是在react中，可变状态通常是保存在state中的，并且要求状态只能通过setState进行修改。受控组件：value值受到了statet控制的表单元素
react antd form多组表单数据处理
weixin_33739627的博客
03-27 6316
import React from 'react'; import {Form, InputNumber, Input, DatePicker, Button, Select, Icon} from 'antd'; import moment from 'moment'; // 推荐在入口文件全局设置 locale import 'moment/locale/zh-cn'; mome...
React 项目中使用AntDesign框架时处理同一个页面使用多个Form表单的问题
前端小小白的爬坑之路
04-01 2万+
React 项目中同一个页面使用多个Form表单，如果直接在Render中使用多个Forn，在提交某一个表单时会同时触发其他表单的提交事件，因此可以使用函数式的方法return出Form组件，然后再Render中引用，从而使页面上的Form相互独立 代码如下： import React, { Component } from 'react'; import { Form, Button,...
React项目优化(6)-表单中组织表单元素(FormItem)的三种方案
军火库
08-16 1796
在笔者使用React开发PC端后台管理系统和资金业务系统的过程中，使用最普通，最常见的组件就是表格组件Form及表单组件Table。由于业务比较复杂，导致每一个表单或表格都会有很多元素组成。而系统中又又很多的表单或表格。那么，如何组织表单元素，看似简单，实则对整个项目的开发过程影响重大。合理的表单组织方式，能够减少繁琐的工作量，能够快速的定位问题，处理问题。本文中，笔者结合自己的项目实践，向大家展示三种在复杂表单中组织表单项的方式。1.基于表单及表格元素的组织方式仁者见仁，智者见智。...
react - 操作DOM同时提交多表单
weixin_43996865的博客
08-07 1104
1. 创建表单组件 第一个表单组件 const CaseBaseInfoForm = Form.create()(props => { const { form, } = props; return ( <Form ref={caseBaseInfo}> ... </Form> ); }); 第二个表单组件 c...
react大数据量渲染_React大量数据渲染的绝佳解决方案——React虚拟化组件
weixin_39549936的博客
12-20 2584
介绍在当下Web开发盛行的时代里，Web应用随之面临着各种问题，虽然前端框架或者前端解决方案百花齐放，但是并不是所有的问题都能很完美的解决。由于Web应用是基于浏览器渲染界面的，而由于浏览器瓶颈的限制，当大量数据需要渲染到DOM中时，常常会很卡顿，传统的做法大多数是向用户展示一个loading遮罩层，或者是类似于分页形式的加载，但显然有些时候并不能解决所有问题，长时间loading的战展示或许还会...
html表单代码例子_关于React的这些细节，你知道吗？-表单
weixin_39832448的博客
11-29 138
在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称：此表单具有默认的 HTML 表单行为，即在用户提交表单后浏览到新页面。如果你在 React 中执行相同的代码，它依然有效。但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单...
react中受控组件和非受控组件
最新发布
06-08
受控组件是指表单元素的值由React控制的组件，例如input、textarea和select等元素。这些组件的值通常由父组件通过props传递并在回调函数中更新，每当用户输入时，React会更新组件的状态并重新渲染组件。 非受控组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值