react的es6最新中表单详解，input select下值的获取

1.首先我们应该清楚两个东西，state和setState ,一个是状态，一个是设置状态，我们就可以在状态中添加一些默认的数据，然后用setState来改变state，此时，会触发render（）从新来渲染页面，

代码如下：命名很乱，能懂意思就行，

import React, { Component } from 'react';
class App extends Component {
constructor(props){
super(props);
this.fn = this.fn.bind(this);
this.wode = this.wode.bind(this);
this.hand = this.hand.bind(this);
this.tade = this.tade.bind(this);
this.nide = this.nide.bind(this);
//设置初始值
this.state={
a:'',
b:'',
c:'',
d:''
}

};
//获取input中的值,动态渲染再节点上去
wode(e){
let value = e.target.value;
this.setState({a: value})
};
hand(e){
let value = e.target.value;
this.setState({b: value})

};
tade(e){
let value = e.target.value;
this.setState({c: value})

};
nide(e){
let value = e.target.value;
this.setState({d: value})
};

fn(){
//点击事件,然后拼接数据，最后通过AJAX发送待后台API地址，后台进行解析
//对象值得方式
var data = {name:this.state.a,pass:this.state.b,xingbie:this.state.c,tel:this.state.d}
4000

var str = JSON.stringify(data);
document.write(str + "<br />")
};
render() {
return (
<div className="App">
<div className="form-group">
<label for="name">用户名</label>
<input type="text" class="form-control"
placeholder="请输入名称"  value={this.state.a}  onChange={this.wode}/>
</div>
<div className="form-group">
<label for="name">密码</label>
<input type="text" class="form-control"
placeholder="请输入密码" value={this.state.b}  onChange={this.hand}/>
</div>

<div className="form-group">
性别: <select value={this.state.c} onChange={this.tade}>
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>

<div className="form-group">
<label for="name">电话</label>
<input type="text" class="form-control"
placeholder="请输入电话" value={this.state.d}  onChange={this.nide}/>
</div>

<div className="form-group">
<button type="button" className="btn btn-info" onClick={this.fn}>提交</button>
</div>

</div>

);
}
}

export default App;

“`

this.wode = this.wode.bind(this); react中事件的绑定写法，绑定在自己身上的意思。