07state简写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
<script type="text/babel">
    //www.bind({a:1,b:2})  返回的是一个函数
    class Weather extends React.Component{
        state ={
            isHot:true,
            wind:'微风'
        }
        render() {
            console.log(this)
            const state =this.state
            return (
                <h1 onClick={this.changeWeather}>今天天气很{state.isHot ? '炎热' : '凉爽'},{state.wind}</h1>
            )
        }
        //写匿名函数会报错,因为changeWeather是在类上的,不在函数上
        //自定义方法要用赋值语句的形式+箭头函数
        changeWeather=()=> {
            const state =this.state
            this.setState({
                isHot : !state.isHot,
            })

        }
    }
    ReactDOM.render(<Weather/>,test)

</script>
posted @ 2022-07-06 10:09 大宁0615 阅读(21) 评论(0) 收藏举报
刷新页面返回顶部