Trang chủ Khám phá Trợ giúp
Đăng nhập
lovecoding
/
w1020
10
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

react

郑柏铃 1 ngày trước cách đây
mục cha
a743e92772
commit
b1b70f1bd3
4 tập tin đã thay đổi với 139 bổ sung và 1 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 44 0
      20.react/初阶/12.事件对象.html
  2. 51 0
      20.react/初阶/13.监听器this.html
  3. 43 0
      20.react/初阶/对比.html
  4. 1 1
      20.react/初阶/模版.html

+ 44 - 0
20.react/初阶/12.事件对象.html
Xem Tập Tin 

@@ -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>

+ 51 - 0
20.react/初阶/13.监听器this.html
Xem Tập Tin 

@@ -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>

+ 43 - 0
20.react/初阶/对比.html
Xem Tập Tin 

@@ -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>

+ 1 - 1
20.react/初阶/模版.html
Xem Tập Tin 

@@ -17,7 +17,7 @@
 
                 <div></div>
 
                 <div></div>
 
             )
 
             )
 
         }
 
         }
 
-        root.render();
 
+        root.render(<App/>);
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>