react 表单
根据react的示例,要取得受限组建的值,可以采用下面的方法:
import React ,{PropTypes}from 'react';
import { render } from 'react-dom';
const styles={
mb10:{
marginBottom:'15px'
},
w200:{
width:'200px',
}
} class test extends React.Component{
constructor(props){
super();//和react没什么关系,javascript的特性,用于访问父对象上的函数。
this.state={
uName:'',
choose:'1',//==>设置默认值
gender:'Male',//==>设置默认值
city:{
cd:false,
bj:true,
sh:true
},
desc:'',
}
};
nameChange = (event)=> {
this.setState({
uName:event.target.value
});
};
chooseChange = (event) =>{
this.setState({
choose:event.target.value
});
console.log(event.target.value)//==>立即打印值
};
handleGenderChange = (e) => {
this.setState({
gender: e.target.value
});
};
cityChang = (event) => {
const value = event.target.value;
const city = Object.assign({}, this.state.city); city[value] = !city[value]; this.setState({
city: city
});
};
descChange = (e) => {
this.setState({
desc:e.target.value
})
};
formSubmit = () => {
console.log(this.state)//打印全部
console.log('uName是:'+this.state.uName)
console.log("select值是:"+this.state.choose)
console.log("radio值是:"+this.state.gender)
console.log("选择的城市是:"+ Object.keys(this.state.city).filter(item => this.state.city[item]).join(','))
console.log("文本域内容是:"+this.state.desc)
};
render(){
const selectList=[
{value:'1',lable:'选择1'},
{value:'2',lable:'选择2'},
{value:'3',lable:'选择3'},
{value:'4',lable:'选择4'},
{value:'5',lable:'选择5'},
{value:'6',lable:'选择6'}
]
return(
<div>
<div>
<div style={styles.mb10}>
姓名:
<input type="text" name="uName" value={this.state.uName} onChange={this.nameChange}/>
<span>{this.state.nameError}</span>
</div>
<div style={styles.mb10}>
下拉框:
<select style={styles.w200} name="choose" value={this.state.choose} onChange={this.chooseChange}>
{selectList.map((list,index)=>(
<option value={list.value} key={index}>{list.lable}</option>
))}
</select>
</div>
<div style={styles.mb10}>
单选框:
<input type="radio" name="gender" value="Male" onChange={ this.handleGenderChange } checked={ this.state.gender === 'Male' } />
男
<input type="radio" name="gender" value="Female" onChange={ this.handleGenderChange } checked={ this.state.gender === 'Female' } />
女
</div>
<div style={styles.mb10}>
复选框:
<input name="city" type="checkbox" value="cd" onChange={this.cityChang} checked={this.state.city.cd}/>成都
<input name="city" type="checkbox" value="bj" onChange={this.cityChang} checked={this.state.city.bj}/>北京
<input name="city" type="checkbox" value="sh" onChange={this.cityChang} checked={this.state.city.sh}/>上海 </div>
<div style={styles.mb10}>
文本域:
<textarea name="desc" value={this.state.desc} onChange={this.descChange}>
</textarea>
</div>
<input type="button" value="提交表单" onClick={this.formSubmit} />
</div>
</div>
)
}
}
export default test;
测试打印值如下:
上面这种方法,是可以实现需求,但是当表单字段很多的时候,就比较尴尬了。不过有方法可以简写代码。
把onChange事件修改成一个,如下:
handleChange = (e) => {
this.setState({
[e.target.name]:e.target.value
})
console.log(e.target.value)//==>调试打印值
};
dom部分也就要把onChange绑定的事件都改成这个,如下:(注意name和value的命名,与this.state中的保持一致)
<div style={styles.mb10}>
姓名:
<input type="text" name="uName" value={this.state.uName} onChange={this.handleChange}/>
<span>{this.state.nameError}</span>
</div>
<div style={styles.mb10}>
下拉框:
<select style={styles.w200} name="choose" value={this.state.choose} onChange={this.handleChange}>
{selectList.map((list,index)=>(
<option value={list.value} key={index}>{list.lable}</option>
))}
</select>
</div>
<div style={styles.mb10}>
单选框:
<input type="radio" name="gender" value="Male" onChange={ this.handleChange } checked={ this.state.gender === 'Male' } />
男
<input type="radio" name="gender" value="Female" onChange={ this.handleChange } checked={ this.state.gender === 'Female' } />
女
</div>
<div style={styles.mb10}>
文本域:
<textarea name="desc" value={this.state.desc} onChange={this.handleChange}>
</textarea>
</div>
这种方法已经相对减少代码量了,但是CheckBox不能使用这种方法,CheckBox要单独写一个onChange事件,示例如第一段代码中的this.cityChang事件。
也可以使用react-compontent的form 可以大大简化代码。
https://github.com/react-component/form
关于箭头函数
以上示例使用箭头函数。
若函数是下面这种写法:
handleChange(e) {
this.setState({
[e.target.name]:e.target.value
})
console.log(e.target.value)//==>调试打印值
};
那么就要修改下constructor,加上bind,否则有this指向问题,会出现:'setState' of undefined错误
constructor(props){
super();//和react没什么关系,javascript的特性,用于访问父对象上的函数。
this.state={
uName:'',
choose:'1',//==>设置默认值
gender:'Male',//==>设置默认值
city:{
cd:false,
bj:true,
sh:true
},
desc:'',
};
this.handleChange=this.handleChange.bind(this);
};
更推荐这种写法,效率高于箭头函数。
react 表单的更多相关文章
- react 表单获取多个input
react 表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...
- 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容
一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...
- React表单元素的使用
一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
- 6. React 表单使用介绍
表单是前端页面中非常重要也是非常常用的一个内容,react 也在表单方面进行了很多封装,让开发者可以方便快捷地在 react 组件中使用表单.下面介绍如何在组件中正确的使用表单,从而可 ...
- react表单事件和取值
常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值. 输入框 在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件 ...
- React 表单组件
诸如 <input>.<textarea>.<option> 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化.这些组件提供的界面使响应用户交互的表单 ...
- [转]React表单无法输入原因----约束性和非约束性组件
转自:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...
- [原创]react-vio-form 快速构建React表单应用
react-vio-form 是一个react的快速轻量表单库,能快速实现表单构建.提供自定义表单格式.表单校验.表单信息反馈.表单信息隔离等功能.可采用组件声明或者API的形式来实现表单的功能 de ...
随机推荐
- 如何在Windows Server 2008 R2 SP1安装Redis-x64-3.2.100,并且自动注册服务
1.官网:http://redis.io/ 2.下载地址:https://github.com/MSOpenTech/redis/releases 3.最新的安装包: 4.点击msi文件开始安装. 5 ...
- python 学习笔记 -logging模块(日志)
模块级函数 logging.getLogger([name]):返回一个logger对象,如果没有指定名字将返回root loggerlogging.debug().logging.info().lo ...
- GJM: 设计模式 - 观察者模式
GJM : 观察者模式 视频地址: http://www.imooc.com/learn/415 本课程通过一个天气预报的发布和订阅案例,来讲解观察者模式在Java项目中的应用.主要包括观察者模式的结 ...
- Mysql增加、删除和修改列属性和约束,和一些有用的查询语句
最近在整理关于MySql的东西,把一些需要记录的东西写下来,以便以后查询和浏览,以下是一些操作技巧.添加表字段alter table` 表名称` add transactor varchar(10) ...
- 移动Web利器transformjs入门
简介 在过去的两年,越来越多的同事.朋友和其他不认识的童鞋进行移动web开发的时候,都使用了transformjs,所有必要介绍一下,让更多的人受益,提高编程效率,并享受编程乐趣.(当然transfo ...
- canvas学习之API整理笔记(一)
其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...
- React Native知识11-Props(属性)与State(状态)
一:Props(属性) 大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性).props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变 通过 ...
- 【代码笔记】iOS-由身份证号码返回性别
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...
- git命令查看远程分支
使用git remote -v命令可以查看本地设置好的所有远程仓库地址. ➜ learn-vue git:(master) git remote -v origin https://github.co ...
- js异步加载的3种方式(转载)
1.defer标签 只支持IE defer属性的定义和用法: 属性规定是否对脚本执行进行延迟,直到页面加载为止.有的 javascript 脚本 document.write 方法来创建当前的文 ...