React的form表单提交

包括了表单里input radio select checkbox textarea form 等一些操作，

 import React,{Component} from 'react';class Reactform extends Component {constructor(props) {super(props);this.state = { msg:'React表单',name:'',sex:'1',cty:'',info:'', citys:['北京','上海','深圳'],hobby:[{title:'睡觉','checked':true},{title:'打游戏','checked':false},{title:'旅游','checked':true}]};}handelSubmit=(e)=>{// 一点提交就会刷新，阻止submit事件e.preventDefault();console.log(this.state.name,this.state.sex,this.state.cty,this.state.hobby,this.state.info );}handelName=(e)=>{this.setState({name:e.target.value})}handelSex=(e)=>{this.setState({sex:e.target.value})}oncity=(e)=>{this.setState({cty:e.target.value})}handelChecked=(key)=>{var hobby = this.state.hobby;hobby[key].checked = !hobby[key].checked;this.setState({hobby:hobby})}handelinfo=() =>{this.setState({info:this.refs.info.value})}render() {return (<div><hr/><h2>{this.state.msg}</h2><form onSubmit ={this.handelSubmit}><label>用户名</label><input type="text" value={this.state.name} onChange={this.handelName}/><br/><br/><label htmlFor="性别">性别:</label><input type="radio" value='1' checked={this.state.sex ==1} onChange={this.handelSex} />男<input type="radio" value='2' checked={this.state.sex ==2} onChange={this.handelSex} />女<br/><label htmlFor="地址">地址:</label><select name="" value={this.state.cty} onChange={this.oncity}>{this.state.citys.map((item,key)=>{return <option key={key}>{item}</option>})}</select><br/><label htmlFor="爱好">爱好:</label>{this.state.hobby.map((item,key)=>{return(<span key={key}><input type="checkbox" checked={item.checked} onChange={this.handelChecked.bind(this,key)}/><label htmlFor="">{item.title}</label></span>)})}<textarea name="" ref='info' value={this.state.info} onChange={this.handelinfo} cols="30" rows="10"></textarea><br/><br/><input type="submit" value="提交"/></form></div>);}}export default Reactform;

如果有问题，可以加我微信一起讨论，我们一起进步！
屏幕前的你，加油！

React的form表单提交相关推荐

html form提交前验证,form表单提交前验证实现方法
form表单提交前验证实现方法2017-11-26 20:54 form表单提交是网站中最常见的,基本上所有的网站都会用到. 除非你就一些静态网页,仅仅是展示,而不需要互动,所以不需要提交表单. 但是 ...
form表单提交踩坑记
2019独角兽企业重金招聘Python工程师标准>>> 今天收获了一次集团故障,心塞不已,究其原因,是form表单提交时web服务器对大小做了限制.这个必现的问题在测试阶段也不知为啥 ...
Form表单提交按钮图片IE6下背景透明（js提交）
Form表单提交按钮图片IE6下背景透明(js提交) 我们知道光png图片在IE6下面透明方法很多,网上也很多,但是我今天遇到了个难题:form表单提交按钮png图片要求背景透明.我弄了半天,转个思 ...
vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
laravel中的form表单提交
提交方法:form表单提交只能提交post 和get ,如果你想提交其他的提交方法,就要如图所示转载于:https://www.cnblogs.com/luxia/p/9001310.html
Django(part17)--form表单提交数据
学习笔记,仅供参考,有错必纠 form表单 form表单的主要作用是和服务器进行交互,为服务器端提供数据. name属性 form表单有name属性,name属性类似于客户端与服务器端之间的约定. f ...
文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...
js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题...
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
action无法传参数给html页面,HTML 解决form表单提交时，action url中参数无效问题
这篇文章主要为大家详细介绍了HTML 解决form表单提交时,action url中参数无效问题,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! ...

React的form表单提交

React的form表单提交相关推荐

最新文章

热门文章