用户在表单中填写的内容,属于用户和组件的交互,所以不能用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。