首页 发现 帮助
登录
lovecoding
/
VIP20
6
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

React day1- 事件处理

daxia 2 年之前
父节点
1d94d9aa4e
当前提交
87f366ac1d
共有 5 个文件被更改，包括 182 次插入 和 1 次删除
合并视图 显示文件统计
  1. 71 1
      20_React.js_VIP22/React.js快速进坑.md
  2. 54 0
      20_React.js_VIP22/day-1/code/5.事件处理-注册事件.html
  3. 57 0
      20_React.js_VIP22/day-1/code/6. 事件处理-事件对象.html
  4. 二进制
      20_React.js_VIP22/day-1/note/事件对象.png
  5. 二进制
      20_React.js_VIP22/day-1/note/事件对象的原型.png

+ 71 - 1
20_React.js_VIP22/React.js快速进坑.md
查看文件 

@@ -119,13 +119,83 @@ let element = (
 
 ReactDOM.createRoot(document.getElementById('root')).render(element);
 
 ReactDOM.createRoot(document.getElementById('root')).render(element);
 
 ```
 
 ```
 
 
 
+## 4. 事件处理
 
 
 
+> 所有UI界面都需要通过事件来完成交互的。
 
+>
 
+> 不同与Vue，有v-on指令来处理事件，react是通过jsx相对应的事件属性来实现的
 
 
 
+React在处理事件时，和原生DOM对象类似。可以通过对应事件相关属性来注册监听器。
 
 
 
+不同的是：
 
 
 
+1. 原生DOM事件属性 都是 全小写的；而React是 基于原生事件属性转换后的驼峰命名。
 
+2. 原生DOM事件绑定的值类型为 string；而React JSX 事件绑定的值类型为 function。
 
+
 
+```html
 
+<!-- 原生事件注册 -->
 
+<button id="btn">点我试试</button>
 
+<script>
 
+  // 比如注册点击事件
 
+  document.getElementById('btn').onclick = function () {
 
+    alert('你敢点我？？？');
 
+  };
 
+</script>
 
+```
 
+
 
+```jsx
 
+// React中的实现
 
+function handleClick() {
 
+  alert('你敢点我？？？');
 
+}
 
+const element = <button onClick={handleClick}>点我试试</button>;
 
+
 
+ReactDOM.createRoot(document.querySelector('#root')).render(element);
 
+```
 
+
 
+
 
+
 
+### 4.1 事件对象
 
+
 
+> 在实际开发中，当某一事发生后开发者需要根据当前事件获取相关的信息数据。此时就需要找到事件对象。不同的事件，会创建不同事件对象，并且不同的事件对象包含的数据也不尽相同。
 
+
 
+那么怎么获取 事件对象 呢？默认情况下，JSX中注册所有监听器函数都会接收一个 事件对象 作为 唯一入参。因此在需要时在事件监听器函数中定义形参接收即可。
 
+
 
+```jsx
 
+  // 事件监听的第一个参数 就是 事件对象
 
+  function handleClick(e) {
 
+    console.log(e);
 
+    alert('你敢点我？？？');
 
+  }
 
+
 
+  function handleChage(e) {
 
+    // 每次文本改后将其打印出来
 
+    console.log('changed:', e.target.value);
 
+  }
 
+
 
+  function handleSubmit(e) {
 
+    e.preventDefault(); // 取消默认行为
 
+    alert('submited.');
 
+  }
 
+
 
+  const element = (
 
+    <div>
 
+      {/**1 点击事件 **/}
 
+      <button onClick={handleClick}>点我试试</button>
 
+      {/**2 change事件 **/}
 
+      {/* input元素的change事件 和原生的input事件 是一样的 */}
 
+      <input type="text" onChange={handleChage} />
 
+
 
+      {/**3 submit事件 **/}
 
+      <form onSubmit={handleSubmit}>
 
+        <p>这旮瘩是表单</p>
 
+        <button>提交</button>
 
+      </form>
 
+    </div>
 
+  );
 
+```
 
 
 
 
 
-## 4. 事件处理
 
 
 
 ##  5. 组件
 
 ##  5. 组件

+ 54 - 0
20_React.js_VIP22/day-1/code/5.事件处理-注册事件.html
查看文件 

@@ -0,0 +1,54 @@
 
+<!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>事件处理</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>
 
+    <!-- 原生事件注册 -->
 
+    <!-- <button id="btn">点我试试</button> -->
 
+    <script type="text/babel">
 
+      // 比如注册点击事件
 
+      // 原生DOM实现
 
+      // document.getElementById('btn').onclick = function () {
 
+      //   alert('你敢点我？？？');
 
+      // };
 
+      // React中的实现
 
+      function handleClick() {
 
+        alert('你敢点我？？？');
 
+      }
 
+
 
+      function handleChage() {
 
+        console.log('changed');
 
+      }
 
+
 
+      function handleSubmit() {
 
+        alert('submit');
 
+      }
 
+
 
+      const element = (
 
+        <div>
 
+          {/**1 点击事件 **/}
 
+          <button onClick={handleClick}>点我试试</button>
 
+          {/**2 change事件 **/}
 
+          {/* input元素的change事件 和原生的input事件 是一样的 */}
 
+          <input type="text" onChange={handleChage} />
 
+
 
+          {/**3 submit事件 **/}
 
+          <form onSubmit={handleSubmit}>
 
+            <p>这旮瘩是表单</p>
 
+            <button>提交</button>
 
+          </form>
 
+        </div>
 
+      );
 
+
 
+      ReactDOM.createRoot(document.querySelector('#root')).render(element);
 
+    </script>
 
+  </body>
 
+</html>

+ 57 - 0
20_React.js_VIP22/day-1/code/6. 事件处理-事件对象.html
查看文件 

@@ -0,0 +1,57 @@
 
+<!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>事件处理</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>
 
+    <!-- 原生事件注册 -->
 
+    <!-- <button id="btn">点我试试</button> -->
 
+    <script type="text/babel">
 
+      // 比如注册点击事件
 
+      // 原生DOM实现
 
+      // document.getElementById('btn').onclick = function () {
 
+      //   alert('你敢点我？？？');
 
+      // };
 
+      // React中的实现
 
+      function handleClick(e) {
 
+        console.log(e);
 
+        alert('你敢点我？？？');
 
+      }
 
+
 
+      function handleChage(e) {
 
+        // 每次文本改后将其打印出来
 
+        console.log('changed:', e.target.value);
 
+      }
 
+
 
+      function handleSubmit(e) {
 
+        e.preventDefault(); // 取消默认行为
 
+        alert('submited.');
 
+      }
 
+
 
+      const element = (
 
+        <div>
 
+          {/**1 点击事件 **/}
 
+          <button onClick={handleClick}>点我试试</button>
 
+          {/**2 change事件 **/}
 
+          {/* input元素的change事件 和原生的input事件 是一样的 */}
 
+          <input type="text" onChange={handleChage} />
 
+
 
+          {/**3 submit事件 **/}
 
+          <form onSubmit={handleSubmit}>
 
+            <p>这旮瘩是表单</p>
 
+            <button>提交</button>
 
+          </form>
 
+        </div>
 
+      );
 
+
 
+      ReactDOM.createRoot(document.querySelector('#root')).render(element);
 
+    </script>
 
+  </body>
 
+</html>

二进制
20_React.js_VIP22/day-1/note/事件对象.png
查看文件


二进制
20_React.js_VIP22/day-1/note/事件对象的原型.png
查看文件