react如何获取表单数据

react如何获取表单数据?

分为两种情况:第一种是每次输入都会更新状态第二种是只有用到的时候才获取(会用大量的ref,不推荐)

这里主要介绍第一种

//这是我们要操作的数据state = {resume:{username: '',password:''}}//通过传参的方式setdata = (objname, key) => {console.log(window)return (e) => {console.log(window)console.log(objname, key, e)const data = this.state[objname]data[key] = e.target.valuethis.setState({ [objname]: data })}}render(){return(<div>账号:<input onChange={this.setdata('resume','username')} type="text" />密码:<input onChange={this.setdata('resume','password')} type="password" /><button onClick={this.send}>提交</button></div>)
}

除了通过传参也可与利用标签的属性
<input customName="resume" name="username" onChange={this.setdata()} type="text" />
获取属性 e.target.name e.target.getAttribute('customName')
获取到属性之后和传参的操作也就一致了

遇到多选框就需要稍微的改变一下了

  setdata = (objname, key) => {return (e) => {const data = this.state[objname]if (e.target.type === "checkbox") {data[key]=e.target.checked} else {data[key] = e.target.value}this.setState({ [objname]: data })}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/511053.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从建好到用好,阿里云原生微服务生态的演进

简介&#xff1a;随着微服务技术的成熟&#xff0c;微服务核心架构分层愈加清晰&#xff0c;技术标准化和产业化正在形成&#xff0c;服务治理成为用好、管好服务的必选项&#xff0c;服务网格则成为多语言微服务架构下的技术趋势&#xff0c;阿里云原生微服务生态的演进恰好映…

韵达基于云原生的业务中台建设 | 实战派

简介&#xff1a;本文将为大家分享韵达业务中台基于云原生的建设过程。主要分为三部分&#xff0c;第一部分是 IT 信息的发展规划&#xff0c;第二部分是韵达业务中台建设的详细过程&#xff0c;第三部分是对应云原生技术的支撑。 本文将为大家分享韵达业务中台基于云原生的建…

dom的操作方法

dom的获取 document.getElementById(‘id’)document.getElementsByClassName(‘class’)document.getElementsByTagName(‘tag’)document.getElementsByName(‘name属性’)document.querySelect(‘选择器’)document.querySelectAll(‘选择器’) 节点类型nodeType 标签&…

阿里云PolarDB开源数据库社区与 Tapdata 联合共建开放数据技术生态

简介&#xff1a;近日&#xff0c;阿里云PolarDB开源数据库社区宣布将与 Tapdata 联合共建开放数据技术生态。 近日&#xff0c;阿里云PolarDB开源数据库社区宣布将与 Tapdata 联合共建开放数据技术生态。在此之际&#xff0c;一直专注实时数据服务平台的 Tapdata &#xff0c…

要打造一款稳定顺滑、火遍全球的游戏?云将成为你的坚实后盾

简介&#xff1a;游戏上云&#xff0c;就选阿里云 从简单的棋牌游戏&#xff0c;到大型的角色扮演游戏&#xff0c;各式各样的游戏已经成为了互联网文娱产业的丰富内容生态。 游戏天然是一种线上内容消费&#xff0c;出海有着天然的优势&#xff0c;像《原神》等优质国产游戏…

阿里达摩院发布并开源“通义”大模型,AI底座之上促场景创新

2022 WAIC带上&#xff0c;达摩院发布并开源“通义”大模型&#xff0c;在国内率先构建了AI统一底座&#xff0c;在业界首次实现模态表示、任务表示、模型结构的统一。 9月2日&#xff0c;阿里巴巴达摩院主办世界人工智能大会“大规模预训练模型”主题论坛。会上&#xff0c;达…

EventBridge 与 FC 一站式深度集成解析

简介&#xff1a;本篇文章通过对 EventBridge 与 FC 一站式深度集成解析和集成场景的介绍&#xff0c;旨在帮助大家更好的了解面对丰富的事件时&#xff0c;如何使用 EventBridge 与 FC 的一站式集成方案&#xff0c;快速基于事件驱动&#xff08;EDA&#xff09;架构建云上业务…

“云上企业”是企业面向未来的战略选择

简介&#xff1a;随着越来越多的企业加入数字化转型的行列&#xff0c;每个企业都在期待着数字化能够为其带来二次增长。“云上企业”的规划与实施对于企业意味着技术升级、组织升级与战略升级的融合与叠加&#xff0c;对企业数字化转型的成功具有现实意义。 作者&#xff1a;…

react实现页面多个模块的切换

前言 这是做的一个多模块切换的一个案例&#xff0c;也是第一会这样大量的使用表单&#xff0c;大概有7&#xff0c;8个模块&#xff0c;这里用其中的一个模块来做展示 以下三张图片对应的就是三个模块了 这是第一个展示面这是第二个编辑页 这是呈现数据的页面 实现过程 …

使用 Serverless Devs 插件快速部署前端应用

简介&#xff1a; 近期函数计算和 serverless-devs/s 都更新了一系列的功能, 目前部署静态网站的步骤可以更为简洁了! 作者&#xff1a;邓超 Serverless Devs 开源贡献者 背景 我们在上文 [Aliyun] [FC] 如何使用 serverless-devs/s 部署静态网站到函数计算 中&#xff0c;…

基于 EventBridge 构建数据库应用集成

简介&#xff1a;本文重点介绍 EventBridge 的新特性&#xff1a;数据库 Sink 事件目标。 作者&#xff1a;赵海 引言 事件总线 EventBridge 是阿里云提供的一款无服务器事件总线服务&#xff0c;支持将阿里云服务、自定义应用、SaaS 应用以标准化、中心化的方式接入&#x…

如何合理使用 CPU 管理策略,提升容器性能?

简介&#xff1a;CPU Burst、拓扑感知调度是阿里云容器服务 ACK 提升应用性能的两大利器&#xff0c;它们解决了不同场景下的 CPU 资源管理&#xff0c;可以共同使用。点击下文&#xff0c;查看详情&#xff01; 作者&#xff1a;张佐玮&#xff08;佑祎&#xff09; 前言 在…

自己会用的一些网址

npm网址git网址谷歌插件查兼容的git教程廖雪峰vant官网vue3官网webpack官网iocnfont图标库猫云&#xff08;免费的前端开源项目&#xff09;javascript教程lodashreact官网智能PNG和JPEG压缩antd Ui插件chart 官网图标库css三角形产生器网易云Apinvm的安装教程

技术盘点:容器技术的演进路线是什么?未来有哪些想象空间?

简介&#xff1a;回顾2021年&#xff0c;云原生领域有哪些重要意义的事件&#xff1f; 回顾2021年&#xff0c;云原生领域有哪些重要意义的事件&#xff1f; 1. 基于容器的分布式云管理加速落地&#xff1a; 2021年5月阿里云峰会上&#xff0c;阿里云发布了一云多形态的部署…

技术盘点:2022年云原生架构趋势解读

简介&#xff1a;在云原生等技术的加持下&#xff0c;2022 年的架构领域有哪些值得关注的趋势&#xff1f;云原生如何撑起架构的未来&#xff1f; 作者&#xff1a;辛晓亮 采访嘉宾&#xff1a;至简、彦林 软件架构发展至今&#xff0c;经历了从单体架构、垂直架构、SOA 架构…

js组装知识(待续……)

object.assign() 这个方法回使源对象上的[[Get]]取得属性的值,然后使用目标对象上的[[Set]]设置属性的值 实际上对每个源对象执行的是浅复制,如果多个源对象都有相同的属性,则使用最后一个赋值的值 let obj1 {get a() {return aaa} } let obj2 {set a(val) {console.log(val)…

如何快速构建服务发现的高可用能力

简介&#xff1a;保障云上业务的永远在线&#xff0c;是 MSE 一直在追求的目标&#xff0c;本文通过面向失败设计的服务发现高可用能力的分享&#xff0c;以及 MSE 的服务治理能力快速构建起服务发现高可用能力的演示&#xff0c;模拟了线上不可预期的服务发现相关异常发生时的…

火山引擎发布新一代数智平台VeDI,以数据驱动企业数字化增长

数据是“新石油”&#xff0c;经过提炼加工才能创造价值。 9月2日&#xff0c;火山引擎数据智能科技峰会在杭州举办。会上&#xff0c;火山引擎发布新一代企业级数据产品——数智平台VeDI&#xff08;Volcengine Data Intelligence&#xff09;&#xff0c;包括数据引擎、数据…

阿里云服务网格 ASM 正式发布商业化版本

简介&#xff1a;为了更好地满足企业日益加深的大规模使用服务网格产品、服务多语言互通、服务精细治理等需求&#xff0c;2022 年 4 月 1 日起&#xff0c;阿里云服务网格产品 ASM 正式发布商业化版本&#xff0c;为企业在生产环境下大规模落地服务网格能力提供性能、安全、高…