react setState的使用
<div id="test"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入 babel, 用于将 jsx 转为 js -->
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 此处一定要写 babel -->
<script type="text/babel">
class Weather extends React.Component {
constructor(props) {
super(props)
// 初始化状态
this.state = {isHot: false}
// 解决 changeWeather 中的 this 指向问题
this.changeWeather = this.changeWeather.bind(this)
}
render() {
// return <h2>今天天气{this.state.isHot ? '很热' : '很冷'}</h2>
// return <h2 onClick={demo()}>今天天气{this.state.isHot ? '很热' : '很冷'}</h2>
return <h2 onClick={this.changeWeather}>今天天气{this.state.isHot ? '很热' : '很冷'}</h2>
}
/*
changeWeather 是作为 onClick 的回调,所以不是通过实例调用的,是直接调用
*/
changeWeather() {
// 类中的方法默认开启了局部严格模式,所以 changeWeather 中的 this 为 undefined
const isHot = this.state.isHot
// 状态必须通过 setState 进行更新,且更新是一种合并,不是替换
this.setState({isHot: !isHot})
}
}
ReactDOM.render(<Weather/>, document.getElementById('test'))
</script>