react學習筆記–組件和state的簡單使用（二 、點擊字體改變部分文字）
點擊前和點擊後的文字發生了改變，同時右側的state勾選也發生了改變。
詳細如下代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="example"></div>
<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
<script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/babel">
// 自定義組件 顯示h2標籤點擊更換
class Like extends React.Component{
constructor(props) {
super(props)
//初始化狀態
this.state = {
isLikeMe: false
}
//將新增的方法中的this強制綁定爲組件的對象
this.handleClick = this.handleClick.bind(this)
}
//新添加的方法:內部默認的this我不是組件對象二是undefined
handleClick(){
//得到原有的狀態
const isLikeMe = !this.state.isLikeMe
//更新狀態
// this.setState({isLikeMe:isLikeMe})
//es6新語法
this.setState({isLikeMe})
}
//重寫類的方法
render(){
// const isLikeMe = this.state.isLikeMe /* 與下面寫法一樣 */
const {isLikeMe} = this.state
return <h2 onClick = {this.handleClick}>{isLikeMe?'你喜歡我':'我喜歡你'}</h2>
}
}
ReactDOM.render(<Like />,document.getElementById('example'))
</script>
</body>
</html>