<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="./js/react.development.js"></script>
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel">
class Mypro extends React.Component {
constructor(props) {
super(props)
this.state = {isHot: false} // 当然state中可以保存多个数据。
this.change = this.change.bind(this) // 解决change方法中的this指向问题
}
render() {
const { isHot } = this.state
return <h1 onClick = {this.change}>今天天气很{ isHot ? '凉爽' : '炎热' }</h1>
}
change () {
// this.state.isHot = !this.state.isHot // 错误写法,因为默认开启了严格模式 use strict
//状态不可直接更改。
const isHot = this.state.isHot
this.setState({isHot: !isHot}) // 正确写法,用setState方法去更改。
}
}
ReactDOM.render(<Mypro/>,document.getElementById('test'))
</script>
</body>
</html>
扫一扫
1033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
