'xxx'

2022-01-11 15:42:13 +08:00
parent f9bc684c6e
commit 33e944e672
156 changed files with 151333 additions and 38 deletions
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>状态</title>
+    <script src="../bower_components/react/react.js"></script>
+    <script src="../bower_components/react/react-dom.js"></script>
+    <script src="../bower_components/babel/browser.js"></script>
+</head>
+  <body>
+    <div id="app">
+      <script type="text/babel">
+        var A1=React.createClass({
+          getInitialState:function(){
+            return{
+              data:"abcdefg"
+            }
+          },
+          render:function(){
+            return <h2>{this.state.data}</h2>
+          }
+        });
+        var A2=React.createClass({
+          getInitialState:function(){
+            return{
+              data:["张三","李四","王五"]
+            }
+          },
+          render:function(){
+            var arr=this.state.data;
+            return <ul>{
+              arr.map(function(item){
+                return <li>{item}</li>
+              })
+            }</ul>
+          }
+        });
+        //组件渲染
+        ReactDOM.render(
+          <A2/>
+          ,document.getElementById('app')
+        )
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>修改状态值</title>
+    <script src="../package/bower_components/react/react.min.js"></script>
+    <script src="../package/bower_components/react/react-dom.min.js"></script>
+    <script src="../package/bower_components/babel/browser.min.js"></script>
+</head>
+  <body>
+    <div id="app"></div>
+      <script type="text/babel">
+        var A2=React.createClass({
+          getInitialState:function(){
+            return{
+              data:["张三","李四","王五"]
+            }
+          },
+          handle:function(){
+            let  arr=this.state.data;
+            arr.push("陈轩");
+            this.setState({
+              data:arr
+            })
+          },
+          render:function(){
+            let arr=this.state.data;
+            return <ul>{
+              arr.map(function(item){
+                return <li>{item}</li>
+              })
+            }
+          <li><button type="button" onClick={this.handle}>更新</button></li>
+          </ul>
+          }
+        });
+        //组件渲染
+        ReactDOM.render(
+          <A2/>
+          ,document.getElementById('app')
+        )
+      </script>
+
+  </body>
+</html>
@@ -0,0 +1,56 @@
+<!--
+ * @Author: chenxuan
+ * @Date: 2022-01-11 15:26:22
+ * @LastEditTime: 2022-01-11 15:34:02
+ * @LastEditors: chenxuan
+-->
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>refs属性</title>
+    <script src="../bower_components/react/react.js"></script>
+    <script src="../bower_components/react/react-dom.js"></script>
+    <script src="../bower_components/babel/browser.js"></script>
+</head>
+  <body>
+    <div id="app"></div>
+      <script type="text/babel">
+        var A2=React.createClass({
+          getInitialState:function(){
+            return{
+              data:["张三","李四","王五"]
+            }
+          },
+          handle:function(){
+            let  arr=this.state.data;
+            let _txt=this.refs.test1;
+            arr.push(_txt.value);
+            _txt.value='';
+            this.setState({
+              data:arr
+            })
+          },
+          render:function(){
+            let arr=this.state.data;
+            return <ul>{
+              arr.map(function(item){
+                return <li>{item}</li>
+              })
+            }
+          <li><input type="text" ref="test1"/></li>
+          <li><button type="button" onClick={this.handle}>更新</button></li>
+          </ul>
+          }
+        });
+        //组件渲染
+        ReactDOM.render(
+          <A2/>
+          ,document.getElementById('app')
+        )
+      </script>
+
+  </body>
+</html>