009.React中的事件绑定与state修改原生JS事件绑定 React事件绑定触发事件时修改state在Weath

原生JS事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="bt1">按钮1</button>
    <button id="bt2">按钮2</button>
    <button id="bt3" onclick="changeWeather()">按钮3</button>
    <script>
        const bt1 = document.getElementById('bt1')
        bt1.addEventListener('click',()=>{
            console.log('按钮1被点击了')
        })
        const bt2 = document.getElementById('bt2')
        bt2.onclick=()=>{
            console.log('按钮2被点击了')
        }
        function changeWeather(){
            console.log('按钮3被点击了')
        }

    </script>
</body>
</html>

React事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    
    <!--这里使用了babel用来解析jsx语法-->
    <script type="text/babel">
        // 1.创建组件
        class Weather extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    isHot:true
                }
            }
            render(){
                console.log(this)
                // this.state={
                //     isHot:true
                // }
                const {isHot} = this.state
                return (
                    <h1 id="span" onClick={changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
                )
            }
        }
       
        // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
        ReactDOM.render(<Weather/>,document.getElementById('test'))
        function changeWeather(){
            console.log('标题被点击了')
        }
        // 原生事件绑定
        // const span = document.getElementById('span')
        // span.addEventListener('click',()=>{
        //     console.log('标题被点击了')
        // })
        // 或
        // span.onclick=()=>{
        //     console.log('标题被点击了')
        // }
    </script>
</body>
</html>

触发事件时修改state

注：在Weather实例中，this指向实例可以直接获取和修改state，但在自定函数changeWeather中this指向window对象，获取不到state对象，并且babel严格模式下不允许this直接指向window，打印this会报undefined。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    
    <!--这里使用了babel用来解析jsx语法-->
    <script type="text/babel">
        // 1.创建组件
        class Weather extends React.Component{
            constructor(props){
                super(props)
                this.state={
                    isHot:true
                }
                // 解决this指向问题
                this.changeWeather = this.changeWeather.bind(this)
            }
            render(){
                const {isHot} = this.state
                return (
                    <h1 id="span" onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
                )
            }
            // changeWeather放在哪里？ 放在Weather的原型对象上，供Weather实例使用
            // 通过Weather实例调用changeWeather时，changeWeather中的this就是Weather实例

            // 由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用this不指向Weather实例，指向window
            // 类中的方法默认开启局部的严格模式 所以changeWeather中的this为undefined
            changeWeather(){
                console.log('this.state.isHot',this.state.isHot)
                this.state.isHot = !this.state.isHot
            }
        }
       
        // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
        ReactDOM.render(<Weather/>,document.getElementById('test'))
        // function changeWeather(){
        //     console.log('标题被点击了')
        // }
        // 原生事件绑定
        // const span = document.getElementById('span')
        // span.addEventListener('click',()=>{
        //     console.log('标题被点击了')
        // })
        // 或
        // span.onclick=()=>{
        //     console.log('标题被点击了')
        // }
    </script>
</body>
</html>