react-表单

用户在表单中填写的内容，属于用户和组件的交互，所以不能用this.props读取。
ES5的写法：

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
});

ReactDOM.render(<Input/>, document.body);

ES6的写法：

import React,{ Component } from "react";
import { render } from "react-dom";

class Input extends Component {
    constructor(props){
        super(props);
        this.state = {
            value: 'hello xiao'
        }
    }
    handleChange(event){
        this.setState({
            value: event.target.value
        })
    }
    render(){
        var value = this.state.value;
        return (
            <div className="input_box center">
                <input  value= {value} className="input" type="text" onChange={this.handleChange.bind(this)} placeholder="请输入" />
                <p>{value}</p>
            </div>
        )
    }
}
export default Input;

在这里我们分析一下几个改变的部分
1.初始化方式不同
ES5: 用初始化函数getInitialState

 getInitialState: function() {
    return {value: 'Hello!'};
 },

ES6: 写在constuctor中

constructor(props){
    super(props);
    this.state = {
        value: 'hello xiao'
    }
}

2.this的用法不一样
使用ES6创建组件，class中的方法不会自动将this绑定到实例中，必须使用.bind(this)或者箭头函数来进行手动绑定。
ES5:

render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }

ES6

render(){
    var value = this.state.value;
    return (
        <div className="input_box center">
            {/*ES6绑定this*/}
            <input  value= {value} className="input" type="text" onChange={this.handleChange.bind(this)} placeholder="请输入" />
            <p>{value}</p>
        </div>
    )
}

令一种绑定this的方式（这个有些问题，正在探索中）

handleClick = () => {
    console.log(this);
}
render(){
    var value = this.state.value;
    return (
        <div className="input_box center">
            <input  value= {value} className="input" type="text" onChange={this.handleChange.bind(this)} placeholder="请输入" />
            <p onClick={ this.handleClick }>{value}</p>
        </div>
    )
}

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时的对象，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

---

参考文章：
react入门实例教程-阮一峰
使用ES6语法重构react代码
30分钟掌握ES6核心内容