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>

React不提交表单并且获取表单中的数据相关推荐

留言提交成功页面html,织梦自定义表单自动获取用户IP、提交时间、留言页面的方法...
织梦的自定义表单功能很好用.下面讲解如何利用织梦自定义表单自动获取用户IP.提交时间.留言页面,并转发邮箱. 第一步,在织梦后台新建自定义表单.并添加字段:uname(姓名).utel(电话).uip ...
使用jquery.form.js提交表单并获取后台返回值
使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的值提交到后台 1.前台js代码 //使用jquery.form.js提交表单并获取后台返回值,会把所有有name属性的 ...
JS表单的获取、表单元素的获取、提交表单
获取表单 document.getElementById("id属性值"),通过表单的id属性值获取属性对象 document.表单的name属性值,通过表单的name属性值获取表 ...
html提交表单原理,HTML表单、HTTP Get与Post杂谈
HTTP的GET/POST方式有何区别?这是一个老生常谈的问题,但老生常谈的问题往往有一些让人误解的结论.本文将带您浅尝HTTP协议,在了解HTTP协议的同时将会展示许多被人们忽视的内容.在掌握了HT ...
post multipart/form-data 类型表单如何获取File外其他参数
参考资料: post multipart/form-data 类型表单如何获取File外其他参数:https://www.douban.com/note/536231506/ multipart/f ...
php提交表单处理,PHP表单处理
我们可以在PHP中创建和使用表单.要获取表单数据,需要使用PHP超级元组:$_GET和$_POST. 表单请求可以是get或post. 要从get请求中检索数据,需要使用$_GET,而$_POST用于 ...
php怎么引用表单元素,表单元素：最全的各种html表单元素获取和使用方法总结...
表单是网页与用户的交互工具,由一个元素作为容器构成,封装其他任何数量的表单控件,还有其他任何元素里可用的标签,表单能够包含.....等表单控件元素.表单元素有哪些呢?它包含了如下的这些元素,输入文本 ...
web.py——简单而且功能强大的Python web 框架（4）：生成表单、获取输入和内容的验证
web.py的form模块能够帮助你生成HTML表单:获取用户的输入,并在处理或添加到数据库之前对其进行内容的验证. 表单简介 web.py的表单模块允许生成html表单,获取用户输入,并在处理或将其 ...
php ci提交表单验证,ci表单验证代码
概述这是只考虑php对表单数据的接收处理.至于js部分以前会结合validate来讲解下在解释 CodeIgniter 的数据验证处理之前,让我们先描述一下一般的情况: 一个表单显示了. 你填写并 ...

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

React不提交表单并且获取表单中的数据相关推荐

最新文章

热门文章