根据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. Redis Sentinel机制与用法说明【转】

    本文来自:https://segmentfault.com/a/1190000002680804 概述 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Ma ...

  2. 求数组的长度 C

    对于数组array,计算其占用内存大小和元素个数的方法如下: C/C++ code ? 1 2 3 4 5 //计算占用内存大小 sizeof(array)   //计算数组元素个数 sizeof(a ...

  3. 趣味PAT--循环-19. 币值转换(20)

    One visible minute on the stage is attributed to ten years of invisible practice off the stage. &quo ...

  4. Tengine笔记2:通过IP、域名、端口实现虚拟主机

    一.通过端口创建虚拟主机 案例:通过端口访问两个不同的页面 将/usr/local/tengine-2.1.0/html/index.html内的内容改为 Welcom to port1 然后在/op ...

  5. linux usb installer

    其实很简单,手册上有,cp debian....iso /dev/sdc,但是要把sdc上的分区删掉了先. This will only work if it is a hybrid ISO cont ...

  6. 数据分析与展示——Matplotlib基础绘图函数示例

    Matplotlib库入门 Matplotlib基础绘图函数示例 pyplot基础图表函数概述 函数 说明 plt.plot(x,y,fmt, ...) 绘制一个坐标图 plt.boxplot(dat ...

  7. vue启动报错

    在安装依赖后,启动时报错 修复方法:将项目node_modules文件夹删除掉,重新cnpm install即可

  8. [转]PHP开发中涉及到emoji表情的三种处理方法

    最近几个月做微信开发比较多,存储微信昵称必不可少,可这万恶的微信支持emoji表情做昵称,这就有点蛋疼了 一般Mysql表设计时,都是用UTF8字符集的.把带有emoji的昵称字段往里面insert一 ...

  9. Word中类似正则匹配的查找替换通配符的使用详解

    一.Word查找栏代码&通配符一览表 序号 清除使用通配符复选框 勾选使用通配符复选框 特殊字符 代码 特殊字符 代码or通配符 1 任意单个字符 ^? 任意单个字符 ? 2 任意数字 ^# ...

  10. np.percentile()

    np.percentile(a, q, axis=None, out=None, overwrite_input=False, interpolation='linear', keepdims=Fal ...