<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>更改状态</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="all"></div>
<script type="text/babel">
// 1.定义组件
class Like extends React.Component {
constructor(props){
super(props)
// 3.初始化状态
this.state = {
islike:false
}
// 7.将新增函数change中this强制绑定为组件对象
this.change = this.change.bind(this)
}
change(){
//5.得到状态 取反
const islike = !this.state.islike
console.log(islike)
// 6.更新状态
this.setState({islike})
}
render(){
// 4.读取状态
const {islike} = this.state //解构赋值 等于const islike = this.state.islike
return <h2 onClick={this.change}>{islike?'你喜欢我':'我喜欢你'}</h2>
}
}
// 2.渲染组件标签
ReactDOM.render(<Like/>,document.getElementById('all') )
</script>
</body>
</html>
效果
20201011_103951.gif
