React全栈-社交网络程序 提交表单数据
1. 给每个input 表格添加change 事件
当input 变化时触发
<div className="form-group">
<input
type="text"
className="form-control form-control-lg"
placeholder="用户名"
name="name"
value={this.state.name}
onChange={this.onChange}
/>
</div>
onchange事件:
//获取输入的值,每个值对应相对应的名字
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
e.target.value :表示input 输入的内容 e.target.name:表示输入框对应的名字
2.添加表格提交事件
<form onSubmit={this.onSubmit}>
.......
</form>
onSubmit 事件:
onSubmit(e) {
//阻止默认的行为哦
e.preventDefault();
const newUser = {
name: this.state.name,
email: this.state.email,
password: this.state.password,
password2: this.state.password2
};
console.log(newUser)
// { name: "zxw", email: "zxw@qq.com", password: "123", password2: "123"}
// email: "zxw@qq.com"
// name: "zxw"
// password: "123"
// password2: "123"
// __proto__: Object
// }
}
记得绑定this 的指向:
constructor() {
super();
this.state = {
name: '',
email: '',
password: '',
password2: '',
errors: {}
}; this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
完整代码
import React, { Component } from 'react'
class Register extends Component {
constructor() {
super();
this.state = {
name: '',
email: '',
password: '',
password2: '',
errors: {}
}; this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
//获取输入的值,每个值对应相对应的名字
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
} onSubmit(e) {
//阻止默认的行为哦
e.preventDefault();
const newUser = {
name: this.state.name,
email: this.state.email,
password: this.state.password,
password2: this.state.password2
};
console.log(newUser)
// { name: "zxw", email: "zxw@qq.com", password: "123", password2: "123"}
// email: "zxw@qq.com"
// name: "zxw"
// password: "123"
// password2: "123"
// __proto__: Object
// }
}
render() {
return (
<div className="register">
<div className="container">
<div className="row">
<div className="col-md-8 m-auto">
<h1 className="display-4 text-center">注册</h1>
<p className="lead text-center">创建新的账户</p>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<input
type="text"
className="form-control form-control-lg"
placeholder="用户名"
name="name"
value={this.state.name}
onChange={this.onChange}
/>
</div>
<div className="form-group">
<input
type="email"
className="form-control form-control-lg"
placeholder="邮箱地址"
name="email"
info="我们使用了gravatar全球公认头像, 如果需要有头像显示, 请使用在gravatar注册的邮箱"
value={this.state.email}
onChange={this.onChange}
/>
</div>
<div className="form-group">
<input
className="form-control form-control-lg"
type="password"
placeholder="密码"
name="password"
value={this.state.password}
onChange={this.onChange}
/>
</div>
<div className="form-group">
<input
type="password"
className="form-control form-control-lg"
placeholder="确认密码"
name="password2"
value={this.state.password2}
onChange={this.onChange}
/>
</div>
<input type="submit" className="btn btn-info btn-block mt-4" />
</form>
</div>
</div>
</div>
</div >
)
}
}
export default Register;
React全栈-社交网络程序 提交表单数据的更多相关文章
- 使用jQuery实现跨域提交表单数据
我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据. 在jQue ...
- Struct2提交表单数据到Acion
Struct2提交表单数据到Action,Action取表单的数据,传递变量.对象 HTML.jsp <form action="reg.do" method="p ...
- python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807
html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...
- Yii表单模型使用及以数组形式提交表单数据
按Yii文档里的描述,Yii在处理表单的一般过程是: 创建表单对应的模型类,设置字段验证规则 创建表单提交对应的action,处理提交的内容 在视图中创建表单form 在刚刚的一个小项目里,想使用aj ...
- OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据
OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的 ...
- jquery ajax异步提交表单数据
使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...
- Ajax在jQuery中的应用 (4)向jsp提交表单数据
ajax技术带给我们的是良好的用户体验,同时,使用jquery可以简化开发,提高工作效率. 下面就介绍一下大致的开发步骤. 工具/原料 本文中使用的是 jquery-1.3.2.min.js 方法/步 ...
- HTML5新技术FormData提交表单数据
免去了你每次都要document.getElement的方式去获取input的表单值 传统方式 新技术表单数据提交 FormData使用注意 .无需调用setRequestHeader()方法 .要求 ...
- jquery Ajax提交表单数据
//表单中控件的name要和实体类字段属性一致 $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#your ...
随机推荐
- 【串线篇】sql映射文件-分布查询(上)association 1-1
1.场景 1把钥匙带1把锁 JavaBean:private Lock lock;//当前钥匙能开哪个锁: 1). interface KeyDao: public Key getKeyByIdSim ...
- 9.Markdown语法(自用)——2019年12月12日
title: markdown语法说明 date: "2018-12-26 20:17:16" tags: 技术指令 categories: 技术驿站 markdown语法说明 2 ...
- JAVA学习笔记--初探hash与map
先推荐一篇文章 http://blog.csdn.net/cownew/article/details/6478993 也为自己mark
- Android 获取手机(ios,android)的设备唯一码(mac地址, IMEI)
{ /*获取手机(ios,android)的设备唯一码(mac地址, IMEI)2018年02月16日 ⁄ 综合 ⁄ 共 2697字 ⁄ 字号 小 中 大 ⁄ 评论关闭 app中总会用到客户端下载量数 ...
- Java反射学习-1 - 反射获取类的属性,方法,构造器
新建一个Person类 package cn.tx.reflect; /** * 注解初步了解 * @author Administrator * */ public class Person { p ...
- http 请求包含哪几个部分(请求行、请求头、请求体)
http协议报文 1.请求报文(请求行/请求头/请求数据/空行) 请求行 求方法字段.URL字段和HTTP协议版本 例如:GET ...
- Bugku | 入门逆向
感觉这题偏向于misc ,Orz 用ida打开: 解码:
- BUUCTF | easy_tornado
第一次遇到模板注入的题,赶紧记笔记,此篇相当于对大佬的做法的复现Orz,师傅太强了https://blog.csdn.net/weixin_44255856/article/details/97687 ...
- Sqlachemy的警告SAWarning: The IN-predicate on "sns_object.BIZ_ID" was invoked with an empty sequence. This results in a contradiction, which nonetheless can be expensive to evaluate.
我在使用db_session.query,查询的时候idlist是个空值时候,执行下面的语句就会出现警告.其中后面delete(synchronize_session=False)是删除前面的一堆查询 ...
- 禁止修改input内容
有什么问题请到<a href='/bbs/index.asp?boardid=2'>论坛</a>中发表<br> <!--# 特效来源:http://www.o ...