ホーム エクスプローラ ヘルプ
サインイン
lovecoding
/
web0715
10
0
フォーク 0
ファイル 課題 0 Wiki
ソースを参照

react

e 2 ヶ月 前
親
859bf07e73
コミット
bbea0c2bbf
2 ファイル変更、135 行追加、0 行削除
一括表示 差分情報を表示
  1. 78 0
      16.react/react初阶/12.this指向.html
  2. 57 0
      16.react/react初阶/13.ref.html

+ 78 - 0
16.react/react初阶/12.this指向.html
ファイルの表示 

@@ -0,0 +1,78 @@
 
+<!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.监听器this 实际开发 类组件中
 
+       * 2.类组件 绑定事件 this.xxx 此时 this指向undefined
 
+       * 3.修改this指向：bind apply call
 
+       */
 
+      function News() {
 
+        return (
 
+          <button
 
+            onClick={() => {
 
+              let flower = "牡丹";
 
+              flower = "芍药";
 
+              console.log("点击", flower);
 
+            }}
 
+          >
 
+            按钮
 
+          </button>
 
+        );
 
+      }
 
+      class Main extends React.Component {
 
+        constructor() {
 
+          super();
 
+          this.state = {
 
+            hi: "哈哈哈哈",
 
+            aa: "小明",
 
+          };
 
+          this.handleClick = this.handleClick.bind(this);
 
+        }
 
+        handleClick() {
 
+          // this.state.aa = '小红'
 
+          this.setState({
 
+            aa: "小红",
 
+          });
 
+          // 修改this指向：bind apply call
 
+          console.log(this, "指向");
 
+        }
 
+        render() {
 
+          return (
 
+            <div>
 
+              <p onClick={this.handleClick}>{this.state.aa}</p>
 
+              {/*
 
+                    <p onClick={this.handleClick.bind(this)}>{this.state.aa}</p>
 
+                    */}
 
+              <p
 
+                onClick={() => {
 
+                  this.state.hi = "嘿嘿嘿";
 
+                  this.setState({
 
+                    hi: "嘿嘿嘿",
 
+                  });
 
+                  console.log(this, "休息休息");
 
+                }}
 
+              >
 
+                {this.state.hi}
 
+              </p>
 
+            </div>
 
+          );
 
+        }
 
+      }
 
+      root.render(<Main />);
 
+    </script>
 
+  </body>
 
+</html>

+ 57 - 0
16.react/react初阶/13.ref.html
ファイルの表示 

@@ -0,0 +1,57 @@
 
+<!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"));
 
+        /**
 
+         * ref绑定：
 
+         * 1.在定义部分 声明 ref名字  来自于React.createRef()里
 
+         * 2.在元素部分 需要 使用 ref={xxx}
 
+         * 3.输出： {current:绑定ref的元素}
 
+        */
 
+       const countRef = React.createRef();
 
+       const inpRef = React.createRef();
 
+
 
+        function App() {
 
+            function getMain() {
 
+                console.log(inpRef,"点击了 获取内容",countRef)
 
+            }
 
+            return (
 
+                <div>
 
+                    <p onClick={getMain}>我是函数组件</p>
 
+                    <Count ref={countRef} />  
+                    <input type="text" ref={inpRef} />  
+                </div>
 
+            )
 
+        }
 
+
 
+       class Count extends React.Component {
 
+        constructor() {
 
+            super();
 
+            this.state = {
 
+                num:20
 
+            }
 
+        }
 
+        render(){
 
+            return (
 
+                <h1>显示数值:{this.state.num}</h1>
 
+            )
 
+        }
 
+        }
 
+        root.render(<App/>)        
+    </script>
 
+</body>
 
+</html>