一、使用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