Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
web0715
10
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

react

e 2 сар өмнө
parent
481534b5e2
commit
859bf07e73
2 өөрчлөгдсөн 101 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 56 0
      16.react/react初阶/10.事件绑定.html
  2. 45 0
      16.react/react初阶/11.事件对象.html

+ 56 - 0
16.react/react初阶/10.事件绑定.html
Файл харах 

@@ -0,0 +1,56 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- jsx 语法浏览器不识别 jsx => js 浏览器可识别的语言 -->
 
+    <script src="./babel.min.js"></script>
 
+    <!-- react的核心库 -->
 
+    <script src="./react.development.js"></script>
 
+    <!-- 解析react中的dom库 -->
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="root">
 
+    </div>
 
+    <script type="text/babel">
 
+        let root = ReactDOM.createRoot(document.getElementById("root"));
 
+        /**
 
+         * 事件绑定
 
+         * 1.DOM中 事件绑定：onClick onChange onBlur onSubmit
 
+         * 2.事件流中的事件绑定：addEventListener('click/mousemove',function(){},true(捕获)/false(冒泡))
 
+         * jsx语法
 
+        */
 
+       function App() {
 
+        // 逻辑
 
+        function showMain() {
 
+            alert("我是main");
 
+        }
 
+       function saveMain(){
 
+        console.log("提交")
 
+            alert("我是saveMain");
 
+        }
 
+        // 渲染的jsx语法
 
+        return (
 
+            <div>
 
+                {/*点击事件绑定*/}
 
+                <p onClick={showMain}>你好</p>
 
+                {/*change事件绑定*/}
 
+                <input type="text" onChange={function() {
 
+                    console.log("改变了")
 
+                }} />
 
+                {/*blur事件绑定*/}
 
+                <input type="text" onBlur={() =>{
 
+                    console.log("失焦了")
 
+                }}/>
 
+                {/*submit事件绑定*/}
 
+                <button onClick={saveMain}>提交</button>
 
+            </div>
 
+        )
 
+       }
 
+    //    box.addEventListener
 
+        root.render(<App/>)        
+    </script>
 
+</body>
 
+</html>

+ 45 - 0
16.react/react初阶/11.事件对象.html
Файл харах 

@@ -0,0 +1,45 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- jsx 语法浏览器不识别 jsx => js 浏览器可识别的语言 -->
 
+    <script src="./babel.min.js"></script>
 
+    <!-- react的核心库 -->
 
+    <script src="./react.development.js"></script>
 
+    <!-- 解析react中的dom库 -->
 
+    <script src="./react-dom.development.js"></script>
 
+</head>
 
+<body>
 
+    <div id="root">
 
+    </div>
 
+    <script type="text/babel">
 
+        /**
 
+         * 1.在React中 事件绑定：采用的原生on+原生事件类型 在react中我们一般会采用小驼峰命名法 => onXxx
 
+         * 2.如何获取事件对象 在React中 事件触发时 自带事件对象 一般写成：e ev eve event
 
+        */
 
+        let root = ReactDOM.createRoot(document.getElementById("root"));
 
+        function App() {
 
+            function handleClick(event) {
 
+                console.log(event,'点击事件')
 
+            }
 
+            return (
 
+                <div>
 
+                    <p onClick={handleClick}>
 
+                        下个月就开学了
 
+                    </p>
 
+                    <input type="text" onChange={(e)=>{
 
+                        console.log(e.target.value,'change事件')
 
+                    }} />
 
+                    <br />
 
+                    <input type="text" onKeyDown={function(ev) {
 
+                        console.log(ev,'按下')
 
+                    }} />
 
+                </div>
 
+            )
 
+        }
 
+        root.render(<App/>)        
+    </script>
 
+</body>
 
+</html>