react入门lesson2之state状态
2020-04-07 本文已影响0人
江江简书
前言：react的state是一个状态变更值，是三大属性其中的一个
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="examp1"></div>
<script type="text/javascript" src="../react.development.js"></script>
<script type="text/javascript" src="../react-dom.development.js"></script>
<script type="text/javascript" src="../babel.min.js"></script>
<script type="text/babel">
//定义组件
class Like extends React.Component{
constructor(props) {
super(props);
this.state= {
isLikeMe:false
}
//绑定this
this.handClick = this.handClick.bind(this);
}
//定义方法
handClick(){
const isLikeMe = !this.state.isLikeMe;
// console.log(isLikeMe);
this.setState({isLikeMe});
}
render (){
// let isLikeMe = this.state.isLikeMe
let {isLikeMe} = this.state;
// console.log(this.state.isLikeMe);
return <h2 onClick={this.handClick}>{isLikeMe ? '我是切换的显示' : '我是默认的显示'}</h2>
}
}
ReactDOM.render(<Like />,document.getElementById('examp1'))
</script>
</body>
</html>
