首頁 探索 說明
登入
Testaccount
/
1.Test
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

fix:react

zzb0322 1 年之前
父節點
5ba2a07fb4
當前提交
541b138610
共有 4 個文件被更改，包括 170 次插入 和 0 次删除
統一視圖 顯示文件統計
  1. 37 0
      zzb/react/练习代码/1.html
  2. 45 0
      zzb/react/练习代码/2.html
  3. 44 0
      zzb/react/练习代码/props练习.html
  4. 44 0
      zzb/react/练习代码/state练习.html

+ 37 - 0
zzb/react/练习代码/1.html
查看文件 

@@ -0,0 +1,37 @@
 
+<!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">
 
+        function handleClick() {
 
+            console.log("早上好")
 
+        }
 
+        function handleChange(e){
 
+            console.log("发生更改了",e.target.value)
 
+        }
 
+        function handleSubmit(e){
 
+            e.preventDefault();
 
+            console.log("提交了")
 
+        }
 
+        let element = (
 
+            <div>
 
+                <button onClick={handleClick}>点击摁钮</button>
 
+                <br/>
 
+                <input type="text" onChange={handleChange}/>
 
+                <form onSubmit={handleSubmit}>
 
+                    <button>提交</button>    
+                </form>
 
+            </div>
 
+        )
 
+        ReactDOM.createRoot(document.querySelector("#root")).render(element)
 
+    </script>
 
+</body>
 
+</html>

+ 45 - 0
zzb/react/练习代码/2.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>
 
+    <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>
 
+    <div id="btn">这是一个按钮</div>
 
+    <script type="text/babel">
 
+        function onClick(){
 
+            console.log(this)
 
+        }
 
+        function clickFirst(e){
 
+            console.log(this,"正常"),
 
+            console.log(e,'事件')
 
+        }
 
+        function clickSecond(e,...user){
 
+            console.log(e.target)
 
+            console.log(...user)
 
+        }
 
+        function clickThird(e){
 
+            console.log(e)
 
+        }
 
+        document.getElementById("btn").onclick = onClick;
 
+        var aaa = {name:"My name is zzb"};
 
+
 
+        let element = (
 
+            <div>
 
+                <p onClick={clickFirst.bind(aaa)}>事件一</p>
 
+                <p onClick={(e)=>{
 
+                    clickSecond(e,3,444,5555)
 
+                }}>事件二</p>
 
+                <p onClick={clickThird.bind(null,3)}>事件三</p>
 
+            </div>
 
+        )
 
+        let newpage = ReactDOM.createRoot(document.getElementById("root"));
 
+        newpage.render(element)
 
+    </script>
 
+</body>
 
+</html>

+ 44 - 0
zzb/react/练习代码/props练习.html
查看文件 

@@ -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">
 
+        function Good(props) {
 
+            console.log(props,'父级的内容')
 
+            return(
 
+                <div style={{border:"2px solid #f00",padding:"10px"}}>
 
+                    <p>这是父级标签</p>
 
+                    <Day name="张振博" age={19}></Day>
 
+                    </div>
 
+            )
 
+        }
 
+        function Day(props) {
 
+            console.log(props,'子级的内容')
 
+            return(
 
+                <div style={{border:"2px solid #00f",padding:"10px"}}>
 
+                <p>这是一个子级标签</p>
 
+                <p>我的名字叫{props.name}</p>
 
+                <p>我今年{props.age}岁</p>
 
+                <button onclick={()=>
 
+                {
 
+                    handleClick(props)
 
+                }}>获取内容</button>
 
+                    </div>
 
+            )
 
+        }
 
+        function handleClick(props){
 
+            console.log(props,'内容')
 
+        }
 
+        let element = <Good/>
 
+        ReactDOM.createRoot(document.querySelector("#root")).render(element)
 
+    </script>
 
+</body>
 
+</html>

+ 44 - 0
zzb/react/练习代码/state练习.html
查看文件 

@@ -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">
 
+        class Meat extends React.Component {
 
+            state={
 
+                title:"计数器",
 
+                count:0,
 
+            };
 
+            Add(){
 
+                this.setState({
 
+                    count:this.state.count + 1,
 
+                });
 
+            };
 
+            reduce(){
 
+                this.setState({
 
+                    count:this.state.count - 1,
 
+                });
 
+            };
 
+            render(){
 
+                return(
 
+                    <div>
 
+                    <h2>{this.state.title}</h2>
 
+                    <p>当前数值:{this.state.count}</p>
 
+                    <button onClick={this.Add.bind(this)}>+</button>
 
+                    <button onClick={this.reduce.bind(this)}>-</button>    
+                        </div>
 
+                );
 
+            }
 
+        }
 
+        let element = <Meat/>;
 
+        ReactDOM.createRoot(document.querySelector("#root")).render(element)
 
+    </script>
 
+</body>
 
+</html>