根据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 表单的更多相关文章

  1. react 表单获取多个input

    react  表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...

  2. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  3. React表单元素的使用

    一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...

  4. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  5. 6. React 表单使用介绍

            表单是前端页面中非常重要也是非常常用的一个内容,react 也在表单方面进行了很多封装,让开发者可以方便快捷地在 react 组件中使用表单.下面介绍如何在组件中正确的使用表单,从而可 ...

  6. react表单事件和取值

    常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值. 输入框 在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件 ...

  7. React 表单组件

    诸如 <input>.<textarea>.<option> 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化.这些组件提供的界面使响应用户交互的表单 ...

  8. [转]React表单无法输入原因----约束性和非约束性组件

    转自:http://blog.csdn.net/lihongxun945/article/details/46730835 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表 ...

  9. [原创]react-vio-form 快速构建React表单应用

    react-vio-form 是一个react的快速轻量表单库,能快速实现表单构建.提供自定义表单格式.表单校验.表单信息反馈.表单信息隔离等功能.可采用组件声明或者API的形式来实现表单的功能 de ...

随机推荐

  1. 应用.Net+Consul维护RabbitMq的高可用性

    懒人学习的过程就是工作中老大让干啥让做啥就研究研究啥,国庆放假回来的周末老大通过钉钉给我布置了个任务, RabbitMQ高可用解决方案,我想说钉钉太坑了: 这是国庆过后9号周日晚上下班给的任务,我周一 ...

  2. linux(八)__yum工具

    自动处理依赖性关系,并且一次安装所有依赖的软体包,无须繁琐地一次次下载.安装. 什么是yum? yum工具实例: 因为yum指定的软件仓库源是国外的网站,在国内访问较慢.我们更改它的仓库源. 首先先备 ...

  3. 时光倒流程序设计-AlloyTicker

    熵与负熵 熵遵循熵增原理,即无序非热能与热能之间的转换具有方向性.薛定谔说过:生命本质在于负熵.熵代表的是无序,负熵就是熵的对立,而负熵表示的则是有序.汲取负熵(米饭.面包.牛奶.鸡蛋),可以简单的理 ...

  4. 深入理解javascript选择器API系列第一篇——4种元素选择器

    × 目录 [1]id属性 [2]标签名 [3]name属性[4]all 前面的话 说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用了.DOM定义了许多方式来选取元素,包括getElem ...

  5. Android 弱引用和软引用

    软引用 和 弱引用 1.  SoftReference<T>:软引用-->当虚拟机内存不足时,将会回收它指向的对象:需要获取对象时,可以调用get方法. 2.  WeakRefere ...

  6. MySQL高可用方案

    高可用架构对于互联网服务基本是标配,无论是应用服务还是数据库服务都需要做到高可用.虽然互联网服务号称7*24小时不间断服务,但多多少少有一些时候服务不可用,比如某些时候网页打不开,百度不能搜索或者无法 ...

  7. jquery的几个常用方法

    第一部份关键词: .bind() .unbind() .css() .hasclass() .removeclass .parent() .children() .html() .hide() .sh ...

  8. 华为手机浏览器不支持PUT提交方式的解决方案

    最近所在技术团队在开发webapp项目,前端angularjs+后端.Net MVC API,API登录接口定义为PUT提交方式,在做兼容测试时发现UC.safari.微信浏览器下都可以登录,但在华为 ...

  9. Asp.Net MVC+BootStrap+EF6.0实现简单的用户角色权限管理

    这是本人第一次写,写的不好的地方还忘包含.写这个的主要原因是想通过这个来学习下EF的CodeFirst模式,本来也想用AngularJs来玩玩的,但是自己只会普通的绑定,对指令这些不是很熟悉,所以就基 ...

  10. Linux vim编辑器使用详解

    在Linux中,主要编辑器为vi或者vim,本文围绕vim做简单的讲解说明: Linux默认自带vi(vim)编辑器,其程序包为: [root@xuegod163 ~]# rpm -qf `--1.8 ...