1 день тому · b1b70f1bd3
--- a/20.react/初阶/12.事件对象.html
+++ b/20.react/初阶/12.事件对象.html
@@ -0,0 +1,44 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <script src="./babel.min.js"></script>
			
 
				+    <script src="./react.development.js"></script>
			
 
				+    <script src="./react-dom.development.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="root"></div>
			
 
				+    <script type="text/babel">
			
 
				+        const root = ReactDOM.createRoot(document.getElementById("root"));
			
 
				+        function App() {
			
 
				+            function handleClick(event) {
			
 
				+                console.log("哈哈",event)
			
 
				+            }
			
 
				+            function handleChange() {
			
 
				+                console.log("11")
			
 
				+                return () => {
			
 
				+                    console.log("22")
			
 
				+                }
			
 
				+            }
			
 
				+            return (
			
 
				+                <div>
			
 
				+                    <button onClick={handleClick}>点击</button>   
			
 
				+                    <br/>
			
 
				+                    <br/>
			
 
				+                    <input type="text" onKeyUp={function(event) {
			
 
				+                        console.log('抬起',event)
			
 
				+                    }} />
			
 
				+                    <br/>
			
 
				+                    <br/>
			
 
				+                    <input type="text" onChange={(event)=>{
			
 
				+                        console.log("改变",event)
			
 
				+                    }} />
			
 
				+                </div>
			
 
				+            )
			
 
				+        }
			
 
				+        root.render(<App/>);
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/20.react/初阶/13.监听器this.html
+++ b/20.react/初阶/13.监听器this.html
@@ -0,0 +1,51 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <script src="./babel.min.js"></script>
			
 
				+    <script src="./react.development.js"></script>
			
 
				+    <script src="./react-dom.development.js"></script>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="root"></div>
			
 
				+    <script type="text/babel">
			
 
				+        const root = ReactDOM.createRoot(document.getElementById("root"));
			
 
				+        class App extends React.Component {
			
 
				+            constructor(props) {
			
 
				+                super(props);
			
 
				+                this.state = {
			
 
				+
			
 
				+                }
			
 
				+            // this.handleClick = this.handleClick.bind(this);
			
 
				+            }
			
 
				+           handleClick() {
			
 
				+            console.log(this)
			
 
				+           }
			
 
				+           render() {
			
 
				+             return (
			
 
				+                <div>
			
 
				+                    <button onClick={this.handleClick.bind(this)}>点击</button>   
			
 
				+                    <button onClick={()=>{
			
 
				+                        console.log(this)
			
 
				+                    }}>点击2</button>    
			
 
				+                
			
 
				+                </div>
			
 
				+            )
			
 
				+           }
			
 
				+        }
			
 
				+        root.render(<App/>);
			
 
				+        let obj = {
			
 
				+            aa:12,
			
 
				+            a() {
			
 
				+                console.log(this);
			
 
				+            }
			
 
				+        }
			
 
				+        obj.a()
			
 
				+        var b = obj.a;
			
 
				+        b();
			
 
				+        b.call(window)
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/20.react/初阶/对比.html
+++ b/20.react/初阶/对比.html
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        #box {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            background: #f00;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box"></div>
			
 
				+    <script>
			
 
				+        var box = document.getElementById("box");
			
 
				+        //1. 点击事件 this指向点击的对象
			
 
				+        box.onclick = function() {
			
 
				+            console.log(this); //box
			
 
				+        }
			
 
				+        // // 2.倒计时 this指向window
			
 
				+        // setInterval(function() {
			
 
				+        //         console.log(this); // 
			
 
				+        //     },1000)
			
 
				+        // // 3.对象中的this 指向当前对象
			
 
				+        var obj = {
			
 
				+            name:"Lucy",
			
 
				+            age: 18,
			
 
				+            address:function() {
			
 
				+                console.log(this);
			
 
				+            }
			
 
				+        }
			
 
				+        obj.address()
			
 
				+        // //4.函数中的this 指向window
			
 
				+        function fn1() {
			
 
				+            console.log(this);
			
 
				+        }
			
 
				+        fn1();
			
 
				+    </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/20.react/初阶/模版.html
+++ b/20.react/初阶/模版.html
@@ -17,7 +17,7 @@
 
				                 <div></div>
			
 
				             )
			
 
				         }
			
 
				-        root.render();
			
 
				+        root.render(<App/>);
			
 
				     </script>
			
 
				 </body>
			
 
				 </html>