一、使用bind方法(构造函数内绑定)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三大属性之state使用</title>
</head>
<body>
<div id="test1"></div>
</body>
<script src="./js/babel.min.js" charset="utf-8"></script>
<script src="./js/react.development.js" charset="utf-8"></script>
<script src="./js/react-dom.development.js" charset="utf-8"></script>
<script type="text/babel">
// 1.创建虚拟DOM
class Like extends React.Component {
constructor(props) {
super(props);
this.state = {
isLike: false
};
// 自定义函数中的this默认指向undefined，所以需要修改this的指向
this.handleClick = this.handleClick.bind(this);
}
render(){
const {isLike} = this.state;
return <h2 onClick={this.handleClick}>{isLike ? '他喜欢我' : '他不喜欢我'}</h2>;
}
handleClick(){
// 获取状态
// console.log(this); // undefined
const isLike = !this.state.isLike;
// 修改状态
this.setState({
isLike
})
}
}
// 2.渲染
ReactDOM.render(<Like/>, document.getElementById("test1"));
</script>
</html>
也可以onClick={this.handleClick.bind(this)};这种方法简洁明了，但由于 function函数 在每个render上重新分配，所以有性能影响。
二、使用箭头函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三大属性之state使用</title>
</head>
<body>
<div id="test1"></div>
</body>
<script src="./js/babel.min.js" charset="utf-8"></script>
<script src="./js/react.development.js" charset="utf-8"></script>
<script src="./js/react-dom.development.js" charset="utf-8"></script>
<script type="text/babel">
// 1.创建虚拟DOM
class Like extends React.Component {
constructor(props) {
super(props);
this.state = {
isLike: false
};
// 自定义函数中的this默认指向undefined，所以需要修改this的指向
// 1.bind 2.箭头函数 3.
// this.handleClick = this.handleClick.bind(this);
}
render(){
const {isLike} = this.state;
return <h2 onClick={this.handleClick}>{isLike ? '他喜欢我' : '他不喜欢我'}</h2>;
}
// 箭头函数修正this指向
handleClick = () => {
// 获取状态
// console.log(this); // undefined
const isLike = !this.state.isLike;
// 修改状态
this.setState({
isLike
})
}
}
// 2.渲染
ReactDOM.render(<Like/>, document.getElementById("test1"));
</script>
</html>
三、在15版本中，可以使用React.createClass({})创建组件，这样会自动绑定上下文的this