首頁 探索 說明
登入
lovecoding
/
w1020
10
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

react

郑柏铃 1 天之前
父節點
449cad1a03
當前提交
a743e92772
共有 2 個文件被更改，包括 86 次插入 和 0 次删除
統一視圖 顯示文件統計
  1. 63 0
      20.react/初阶/11.事件绑定.html
  2. 23 0
      20.react/初阶/模版.html

+ 63 - 0
20.react/初阶/11.事件绑定.html
查看文件 

@@ -0,0 +1,63 @@
 
+<!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">
 
+        // 原生DOM的事件绑定:
 
+        // 1.通过事件属性 onclick,onkeyup,onchange....
 
+        // 2.通过DOM对象 addEventListener()/removeEventListener()
 
+
 
+        // 在React中 ， 只能通过第一种方式来注册事件.
 
+        // 区别：
 
+        // 原生事件属性，是由"on + 事件类型"组成的属性，
 
+        // 在jsx上需要改成等价的驼峰命名格式，并且，绑定的事件监听器必须是函数类型
 
+        const root = ReactDOM.createRoot(document.getElementById("root"));
 
+        function App() {
 
+            function handleClick() {
 
+                console.log("哈哈")
 
+                return  () => {
 
+                    console.log("33")
 
+                }
 
+            }
 
+            function handleChange() {
 
+                console.log("11")
 
+                return () => {
 
+                    console.log("22")
 
+                }
 
+            }
 
+            return (
 
+                <div>
 
+                    <button onClick={()=> {
 
+                        console.log("你好")
 
+                    }}>点击</button>   
+                    <button onClick={handleClick}>点击</button>   
+                    <button onClick={handleClick()}>点击1</button>    
+                    <br/>
 
+                    <br/>
 
+                    <input type="text" onKeyUp={function() {
 
+                        console.log('抬起')
 
+                    }} />
 
+                    <br/>
 
+                    <br/>
 
+                    <input type="text" onChange={()=>{
 
+                        console.log("改变")
 
+                    }} />
 
+                    {/*
 
+                    <input type="text" onChange={handleChange()} />
 
+                    */}
 
+                    <input type="checkbox" onChange={handleChange()}  />
 
+                </div>
 
+            )
 
+        }
 
+        root.render(<App/>);
 
+    </script>
 
+</body>
 
+</html>

+ 23 - 0
20.react/初阶/模版.html
查看文件 

@@ -0,0 +1,23 @@
 
+<!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() {
 
+            return (
 
+                <div></div>
 
+            )
 
+        }
 
+        root.render();
 
+    </script>
 
+</body>
 
+</html>