React不提交表单并且获取表单中的数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_非受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = thisalert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input ref={c => this.username = c} type="text" name="username"/>密码：<input ref={c => this.password = c} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>

在这里插入图片描述

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

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

相关文章

分布式系统Paxos算法

分布式系统Paxos算法

转载自 分布式系统Paxos算法 这是一个有关Paxos算法非常形象的讲解与示范。Paxos是能够基于一大堆完全不可靠的网络条件下却能可靠确定地实现共识一致性的算法。也就是说&#xff1a;它允许一组不一定可靠的处理器&#xff08;服务器&#xff09;在某些条件得到满足情况下就能…
阅读更多...
winform实现简单的计算器V1版本

winform实现简单的计算器V1版本

最近在整winform程序&#xff0c;就做了些简单的案例出来&#xff0c;比如说下面的这个计算器&#xff1a; 这个的实现方式还是比较简单的。 首先按照图中的界面从工具箱中拉出来一个窗体&#xff0c;其中的显示结果“86”“1849”也是lable控件&#xff0c;最后放一个计算的…
阅读更多...
用.netcore写一个简单redis驱动,调试windows版本的redis

用.netcore写一个简单redis驱动,调试windows版本的redis

1. 下载windows版本的redis 2.开发环境vs2017 新建一个 .net core控制台。 private static Socket socket new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp); private static BufferedStream buffer null; socket.NoDelay true; s…
阅读更多...
分布式系统的Raft算法

分布式系统的Raft算法

转载自 分布式系统的Raft算法 过去, Paxos一直是分布式协议的标准&#xff0c;但是Paxos难于理解&#xff0c;更难以实现&#xff0c;Google的分布式锁系统Chubby作为Paxos实现曾经遭遇到很多坑。 来自Stanford的新的分布式协议研究称为Raft&#xff0c;它是一个为真实世界应…
阅读更多...
拆分:分解单块系统——《微服务设计》读书笔记

拆分:分解单块系统——《微服务设计》读书笔记

通常&#xff0c;我们可能已有有一个巨大的单块系统&#xff0c;如何实现微服务&#xff0c;我们需要把它分解。 从哪里开始拆分&#xff1a;接缝 接缝&#xff1a;从接缝处可以抽取相对独立的一部分代码&#xff0c;对这部分代码的修改不会影响系统的其他部分。这些接缝就可以…
阅读更多...
winfrom实现简单计算器V2版本

winfrom实现简单计算器V2版本

前面&#xff0c;使用winform实现了个简单的计算器&#xff0c;今天&#xff0c;再来给大家看一个稍微复杂点的计算器&#xff0c;效果图如下&#xff1a; 包括归零&#xff0c;退格&#xff0c;加减乘除都已经实现&#xff0c;如果想要继续扩展的可以在稍微改改即可。 现在看…
阅读更多...
ACID中C与CAP定理中C的区别

ACID中C与CAP定理中C的区别

转载自 ACID中C与CAP定理中C的区别 ACID和CAP定理中都有C&#xff0c;代表Consistent一致性&#xff0c;很多人容易将这两个C混为一谈&#xff0c;其实这两个一致性是有区别的。 事务的定义是一系列操作要么全部成功&#xff0c;要么全部不成功&#xff0c;数据库的事务机制是…
阅读更多...
React的生命周期(旧)

React的生命周期(旧)

坑
阅读更多...
winform通过ListView绑定数据库数据源

winform通过ListView绑定数据库数据源

来&#xff0c;我们开始拉窗体&#xff0c;和我一样的这个就可以&#xff1a; 很简单&#xff0c;在窗体里面只放一个ListView控件即可&#xff0c;然后点击ListView的属性Columns 分别在Text里面写用户名和密码&#xff0c;点击确定。 然后设置显示视图View为Details&…
阅读更多...
理解C# 4 dynamic(4) – 让人惊艳的Clay

理解C# 4 dynamic(4) – 让人惊艳的Clay

一&#xff0c;多种方式初始化对象 1, 最简单的对象构建和初始化 dynamic New new ClayFactory();var person New.Person(); person.FirstName "Louis"; person.LastName "Dejardin"; 注意这里的Person并不是一个具体的&#xff0c;实际存在的类或者…
阅读更多...
配置struts.xml时extends=struts-default会报错,原因和解决

配置struts.xml时extends=struts-default会报错,原因和解决

提示&#xff1a;此种解决方法只适用于Intellij IDEA&#xff0c;MyEclipse或者Eclipse还得另寻它法&#xff0c;但估计原因应该是类似的。 在Intellij IDEA 2017使用Struts2框架时&#xff0c;若新建项目时并未导入Struts2框架而是在后期手动新建lib目录导入Struts2框架后&…
阅读更多...
React生命周期(新)

React生命周期(新)

三个标红的需要前面加上UNSAFE_ 三个常用的组件
阅读更多...
发力企业级市场，微软Hololens开辟了一条VR新道路

发力企业级市场，微软Hololens开辟了一条VR新道路

近日微软Hololens可谓是动作频频&#xff0c;2月份Hololens与BGC Engineering合作&#xff0c;从矿山规划到泥石流建模&#xff0c;该应用程序可帮助BGC Engineering及其客户可视化一个场景并解决工程问题。 3月份HoloLens与Cigna展开医疗合作&#xff0c;将Hololens用于健康检…
阅读更多...
写给工程师的10条精进原则

写给工程师的10条精进原则

转载自 写给工程师的10条精进原则 引言 时间回到8年前&#xff0c;我人生中的第一份实习工作&#xff0c;是在某互联网公司的无线搜索部做一个C工程师。当时的我可谓意气风发&#xff0c;想要大干一场&#xff0c;结果第一次上线就写了人生中第一个CaseStudy。由于对部署环境…
阅读更多...
React向对象数组进行赋值

React向对象数组进行赋值

赋值
阅读更多...
Struts2下创建自定义类型转换器（表单中日期的处理）

Struts2下创建自定义类型转换器（表单中日期的处理）

在表单提交中需要有日期的输入&#xff0c;默认的Struts2处理机制可能不能满足需求&#xff0c;需要自定义一下类型转换器。如&#xff1a; String----->java.util.Date&#xff1a;输入 java.util.Date------>String:输出&#xff1a;查询显示&#xff0c;输出错误回显 …
阅读更多...
部署:持续集成（CI）与持续交付（CD）——《微服务设计》读书笔记

部署:持续集成（CI）与持续交付（CD）——《微服务设计》读书笔记

一.CI&#xff08;Continuous Integration&#xff09;简介 CI规则1&#xff1a;尽量频繁地把代码签入到分支中以进行集成 CI规则2&#xff1a;不光要对语法进行验&#xff0c;也要提供一系列的自动化来验证 CI规则3&#xff1a;CI失败后&#xff0c;要把修复CI当做第一优先级的…
阅读更多...
React中的唯一标识key(用index VS id)和key的选择

React中的唯一标识key(用index VS id)和key的选择

1. 虚拟DOM中key的作用&#xff1a;1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。2). 详细的说: 当状态中的数据发生变化时&#xff0c;react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较&#x…
阅读更多...
Android中ImageView的scaleType 属性说明。

Android中ImageView的scaleType 属性说明。

ImageView是Android中最常用的控件之一&#xff0c;在使用ImageView的时候&#xff0c;必不可少的会使用到scaleType属性&#xff0c;该属性指定了你的ImageView如何显示图片。包括是否进行缩放&#xff0c;等比缩放&#xff0c;缩放后显示的位置&#xff0c; Android中提供了八…
阅读更多...
支付渠道参数如何设计成路由化配置

支付渠道参数如何设计成路由化配置

转载自 支付渠道参数如何设计成路由化配置 今天我们来探讨在搭建支付系统时一个比较关键的问题&#xff1a;渠道参数路由化配置如何设计&#xff1f; 在开发支付系统的时候&#xff0c;我们经常会涉及到对接多个支付渠道&#xff0c;除常见的支付宝、微信外可能还会根据不同的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023