Try   HackMD

區塊鏈前端框架react開發基礎實戰教學文件

tags: Dapp 區塊鏈

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

建議了解 react 和 ES8 async/await promises/callback概念後 再寫solidity智能合約較好上手

非同步問題

component 設計組件類別

  • 程式碼範例1–->































<!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>My First Component</title>
​   <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
​   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
​   <script>
​       //設計組件類別
​       class MyHead extends React.Component{
​           render(){
​               return React.createElement("H1",null,"Hello Component");//  H1--->組件類別名稱 null-->屬性物件 Hello Component--->子元件
​           }
​       }
​       window.addEventListener("load",()=>{//載入網頁內容 事件處理器addEventListener

​           //1.建立自訂的React 組件"實體"
​           let mycomponent=React.createElement(MyHead,null);//---->建立MyHead的組件"實體"(mycomponent)
​           //2.將建立好的React組件實體mycomponent畫到容器中(這裡的容器使用HTML Body Element)
​           ReactDOM.render(
​               mycomponent,body
​           );
​       })
​   </script>
</head>
<body>
​   
</body>
</html>
  • 程式碼範例2–->
































<!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>My First Component</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script>
        //設計組件類別
        class MyHead extends React.Component{
            render(){
                console.log(this.props.level)//this.props.level==3
                return React.createElement("H1"+this.props.level,null,"Hello Component");//this.props.level--->幾號標題 ex:level:3--->this.props.level:3--->h3字形
            }
        }
        window.addEventListener("load",()=>{

            //1.建立自訂的React 組件"實體"
            let mycomponent=React.createElement(MyHead,{level:3});//---->建立MyHead的組件"實體"(mycomponent) ,level:3--->屬性=3 
            //2.將建立好的React組件實體mycomponent畫到容器中(這裡的容器使用HTML Body Element)
            ReactDOM.render(
                mycomponent,document.body
            );
        })
    </script>
</head>
<body>
    
</body>
</html>
  • 程式範例3–->










































<!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>My First Component</title>
​   <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
​   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
​   <script>
​       //設計組件類別
​       class MyHead extends React.Component{
​           render(){//props--->屬性
​               console.log(this.props.level)//this.props.level==3
​               return React.createElement("H"+this.props.level,null,"Hello Component");//this.props.level--->幾號標題 ex:level:3--->this.props.level:3--->h3字形
​           }
​       }
​       class MyHeadList extends React.Component{
​           render(){
​               let heads=[];
​               let head;
​               for(let i=1;i<6;i++){
​                   head=React.createElement(MyHead,{level:i});
​                   heads.push(head);
​               }
​               return React.createElement("DIV",null,heads);//heads--->子元件
​           }
​       }
​       window.addEventListener("load",()=>{

​           //1.建立自訂的React 組件"實體"
​           let mycomponent=React.createElement(MyHeadList,null);//---->建立MyHead的組件"實體"(mycomponent) ,level:3--->屬性=3 
​           //2.將建立好的React組件實體mycomponent畫到容器中(這裡的容器使用HTML Body Element)
​           ReactDOM.render(
​               mycomponent,document.body
​           );
​       })
​   </script>
</head>
<body>
</body>
</html>

component state生命週期

  • 程式範例1–->




















































<!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>My First Component</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script>
        //設計組件類別
        class MyHead extends React.Component{
            render(){
                console.log(this.props.level)//this.props.level==3
                return React.createElement("H"+this.props.level,null,"Hello Component");//this.props.level--->幾號標題 ex:level:3--->this.props.level:3--->h3字形
            }
        }
        class MyHeadList extends React.Component{
            constructor(props){
                super(props)
                this.state={maxlevel:3};
                window.setTimeout(()=>{
                    this.setState({maxlevel:6})
                    //2 secs 後,執行這裡的程式碼
                },2000);
            }

            render(){
                let heads=[];
                let head;
                for(let i=1;i<this.state.maxlevel;i++){
                    head=React.createElement(MyHead,{level:i});
                    heads.push(head);
                }
                return React.createElement("DIV",null,heads);//heads--->子元件
            }
        }
        window.addEventListener("load",()=>{

            //1.建立自訂的React 組件"實體"
            let mycomponent=React.createElement(MyHeadList,null);//---->建立MyHead的組件"實體"(mycomponent) ,level:3--->屬性=3 
            //2.將建立好的React組件實體mycomponent畫到容器中(這裡的容器使用HTML Body Element)
            ReactDOM.render(
                mycomponent,document.body
            );
        })
    </script>
</head>
<body>
</body>
</html>
  • 程式範例2



















































<!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>My First Component</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script>
        //設計組件類別
        class MyHead extends React.Component{
            render(){
                console.log(this.props.level)//this.props.level==3
                return React.createElement("H"+this.props.level,null,"Hello Component");//this.props.level--->幾號標題 ex:level:3--->this.props.level:3--->h3字形
            }
        }
        class MyHeadList extends React.Component{
            constructor(props){
                super(props)
                this.state={maxlevel:3};
                window.setTimeout(()=>{//新狀態跟舊狀態有關聯
                    this.setState((currentState,currentProps)=>({maxlevel:currentState.maxlevel+1}));
                    //2 secs 後,執行這裡的程式碼
                },2000);
            }

            render(){
                let heads=[];
                let head;
                for(let i=1;i<this.state.maxlevel;i++){
                    head=React.createElement(MyHead,{level:i});
                    heads.push(head);
                }
                return React.createElement("DIV",null,heads);//heads--->子元件
            }
        }
        window.addEventListener("load",()=>{

            //1.建立自訂的React 組件"實體"
            let mycomponent=React.createElement(MyHeadList,null);//---->建立MyHead的組件"實體"(mycomponent) ,level:3--->屬性=3 
            //2.將建立好的React組件實體mycomponent畫到容器中(這裡的容器使用HTML Body Element)
            ReactDOM.render(
                mycomponent,document.body
            );
        })
    </script>
</head>
<body>
</body>
</html>
  • React.createElement()–->難以使用
    • 建議以jsx處理 程式碼較簡潔易讀
      • React.createElement(MyHead)<–>let myComponent=</MyHead>

jsx來處理state(jsx唯一目的:取代React.createElement())

  • jsx在JS中類似html標籤語法
  • jsx用途:方便產生react element
  • 瀏覽器不支援jsx語法,載入Babel編譯器套件(將jsx轉換成與瀏覽器相容的js)
  • 程式範例1–->



































<!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>My First Component</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!--載入Babel編譯器套件-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!--包含JSX語法的Javascript必須使用type="text/babel"-->
    <script type="text/babel">
        //設計組件類別
        class MyHead extends React.Component{
            render(){
                return <h1>Hello World</h1>;//React.createElement("h1",null,"Hello World");//this.props.level--->幾號標題 ex:level:3--->this.props.level:3--->h3字形
                //若有屬性(props)則屬性寫在標籤裡面 ex:<h1 屬性>
            }//上面例子沒有屬性(是null)--->標籤裡面不用寫
        }
        window.addEventListener("load",()=>{

            //1.建立自訂的React 組件"實體"
            let elem=<MyHead/>//let elem=React.createElement(MyHead);//---->建立MyHead的組件"實體"(elem) 
            //2.將建立好的React組件實體elem畫到容器中(這裡的容器使用HTML Body Element)
            ReactDOM.render(
                elem,document.body
            );
        });
    </script>
</head>
<body>
</body>
</html>
  • 程式範例2–->


































<!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>My First Component</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!--載入Babel編譯器套件-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!--包含JSX語法的Javascript必須使用type="text/babel"-->
    <script type="text/babel">
        //設計組件類別
        class MyHead extends React.Component{
            render(){
                return <div classname="head">Hello Shawn{this.props.level}</div>//return React.createElement("div",{classname:"head"},"Hello Shawn"+this.props.level);//this.props.level--->幾號標題 ex:level:3--->this.props.level:3--->h3字形
            }//classname設定標籤屬性,和js相同(html才是class)
        }
        window.addEventListener("load",()=>{

            //1.建立自訂的React 組件"實體"
            let myComponent=<MyHead level="3"/>//let mycomponent=createElement(MyHead,{level:3});//---->建立MyHead的組件"實體"(mycomponent) ,level:3--->屬性=3 
            //2.將建立好的React組件實體mycomponent畫到容器中(這裡的容器使用HTML Body Element)
            ReactDOM.render(
                myComponent,document.body
            );
        })
    </script>
</head>
<body>
</body>
</html>
  • 程式範例3–->

















































<!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>My First Component</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!--載入Babel編譯器套件-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style type="text/css">
       .head{font-size:24px;font-weight:bold;}
    </style>
    <!--包含JSX語法的Javascript必須使用type="text/babel"-->
    <script type="text/babel">

    
        //設計組件類別
        class MyHead extends React.Component{
            render(){//className是行外樣式
                return <div className="head" style={{color:this.props.color}}>Hello Shawn{this.props.level}</div>
                //return React.createElement("div",{classname:"head",style:{color:this.props.color}},"Hello Shawn"+this.props.level);//this.props.level--->幾號標題 ex:level:3--->this.props.level:3--->h3字形
            }//classname設定標籤屬性,和js相同(html是class)//style--->行內樣式
        }
        class MyHeadList extends React.Component{
            render(){
                return <div>
                    <MyHead level="1" color="red"/>
                    <MyHead level="2" color="lightblue"/>
                    <MyHead level="3" color="purple"/>
                </div>;
            }
        }
        window.addEventListener("load",()=>{

            //1.建立自訂的React element
            let elem=<MyHeadList/>//React.createElement(MyHeadList);
            //2.將建立好的React element 畫到容器中 (這裡的容器使用HTML Body Element)
            ReactDOM.render(
                elem,document.body
            );
        })
    </script>
</head>
<body>
</body>
</html>

jsx套用樣式 (CSS style)

ajax處理非同步





















function getData(callback)
//2.準備做AJAX連線
{
  let req=new XMLHttpRequest();//XMLHttpRequest--->
  req.open("get","https://training.pada-x.com/resources/javascript-es6-react/data.out");
  req.onload=()=>
  {
      //5.等待一段時間後,[子程式]完成連線,觸發[主程式]的load事件,取得資料
      //6.呼叫callback,即透過參數傳入的showData函式
      callback(this.responseText);//this.responseText--->伺服器回傳的資料(我們等待的資料)
  
  };
  req.send();//3.送出連線,建立[子程式]進行非同步處理
  //4.[主程式立刻結束函式,回傳undefined]
}
function showData(result)
{
    alert(result);//7.可以從result取得連線的資料
};
getData(showData);//1.呼叫取資料用的函式,並將showData函式透過參數傳入

async/await 處理非同步

回呼程式(callback function)處理非同步




























<!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>Document</title>
    <script>//callback function可以處理非同步程序(同理promise也可以)
        function getData(cb){//callback function
            let req=new XMLHttpRequest();//this 指向 物件req
            req.open("get","https://training.pada-x.com/resources/javascript-es6-react/data.out");
            req.onload=()=>
           { 
             cb(this.responseText);
           };
         req.send();
    }
       getData(function(result)//回傳cb(this.responseText)
       {
           alert(result);

       });
    </script>
</head>
<body>
</body>
</html>

promise 處理非同步

  • 程式範例1–->





































<!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>Promise處理非同步程式</title>
    <script>
        function getData(){
            return new Promise(function(resolve,reject){//promise結果2種-->連線成功or連線失敗
            let req=new XMLHttpRequest();//this 指向 物件req
            req.open("get","https:/ing.pada-x.com/resources/javascript-es6-react/data.out");
            req.onload=()=>
            { //如何將連線load()事件後得到資料 this.responseText 串接到主流程式上
               resolve(this.responseText);//if連線成功---->回傳responseText
            };
            req.onerror=()=>
            {
                reject("Error");//if連線失敗--->印出Error
            };
             req.send();
           
            });
    }
        //這是主流程
       //getData回傳值給promise物件
        getData().then(function(result){//(1) 第1個參數(result)--->promise成功時接續動作  (2)第2個參數(error)---->promise失敗時接續動作
           alert(result);
       },function(error){
           alert(error);
       }
       );                 
    </script>
</head>
<body>
</body>
</html>
  • 程式範例2–->then()方法接續動作




































<!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>Promise處理非同步程式</title>
    <script>
        function getData(){
            return new Promise(function(resolve,reject){//promise結果2種-->連線成功or連線失敗
            let req=new XMLHttpRequest();//this 指向 物件req
            req.open("get","https:/ing.pada-x.com/resources/javascript-es6-react/data.out");
            req.onload=()=>
            { 
              resolve(this.responseText);//if連線成功---->回傳responseText
            };
            req.onerror=()=>
            {
                reject("Error");//if連線失敗--->印出Error
            };
             req.send();
           
            });
    }
       let promise=getData();//getData傳值給promise物件
       promise.then(function(result){//(1) 第1個參數(result)--->promise成功時接續動作then  (2)第2個參數(error)---->promise失敗時接續動作then
           alert(result);
       },function(error){
           alert(error);
       }
       );                 
    </script>
</head>
<body>
</body>
</html>
  • 程式範例3–->catch()方法接續失敗





































<!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>Promise處理非同步程式</title>
    <script>
        function getData(){
            return new Promise(function(resolve,reject){//promise結果2種-->連線成功or連線失敗
            let req=new XMLHttpRequest();//this 指向 物件req
            req.open("get","https:/ing.pada-x.com/resources/javascript-es6-react/data.out");
            req.onload=()=>
            { 
              resolve(this.responseText);//if連線成功---->回傳responseText
            };
            req.onerror=()=>
            {
                reject("Error");//if連線失敗--->印出Error
            };
             req.send();
           
            });
    }
       let promise=getData();//getData傳值給promise物件
       promise.then(function(result){//只有一個參數 呼叫完then緊接著呼叫catch作錯誤處理
           alert(result);
       }).catch(function(err){
           alert(err);//另一種錯誤處理方式--->catch用法
       });         
    </script>
</head>
<body>
</body>
</html>

組件的生命週期 lifecycle

建立組件–->依照順序執行以下方法

  • 1.constructor()–->呼叫建構式
  • 2.componentWillMount()–->react把component放到畫面上;組件將要被mount(掛載)上去
  • 3.render()–->render組件到畫面上
  • 4.componentDidMount()–->確定組件畫在畫面上

更新組件–->依照順序執行以下方法

  • 1.componentWillUpdate()–->更新組件
  • 2.render()–->render組件到畫面上
  • 3.componentDidUpdate()–->確定組件更新畫在畫面上

刪除組件–->依照順序執行以下方法

  • 1.componentWillUnmount()–->組件刪除前確定卸載
  • 程式範例1:






























































<!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>My First Component</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script>
        //設計組件類別
        class MyHead extends React.Component{
            render(){
                console.log(this.props.level)//this.props.level==3
                return React.createElement("H"+this.props.level,null,"Hello Component");//this.props.level--->幾號標題 ex:level:3--->this.props.level:3--->h3字形
            }
        }
        class MyHeadList extends React.Component{
            constructor(props){
                super(props)
                this.state={maxlevel:props.start};//props.start=2,maxlevel=2 
            }
                componentWillMount(){//component 將要繪製前的時刻
                    this.intervalId=window.setInterval(()=>{
                     this.setState((currentState,currentProps)=>{
                         if(currentState.maxlevel>currentProps.end){//不要更新
                           return currentState;
                         }
                         else{//maxlevel+1
                           return{maxlevel:currentState.maxlevel+1}
                         }
                     });
                    },1000);//每1秒鐘執行這裡的邏輯
                }
                componentWillUNMount()//組件將刪除前時刻
               {
                   Window.clearInterval(this.intervalId);
               }

            render(){
                let heads=[];
                let head;
                for(let i=1;i<this.state.maxlevel;i++){
                    head=React.createElement(MyHead,{level:i});
                    heads.push(head);
                }
                return React.createElement("DIV",null,heads);//heads--->子元件
            }
        }
        window.addEventListener("load",()=>{
            //1.建立自訂的React 組件"實體"
            let mycomponent=React.createElement(MyHeadList,{start:2,end:5});//---->建立MyHead的組件"實體"(mycomponent) , props-->有兩個屬性start,end 2個 props.start props.end
            //2.將建立好的React組件實體mycomponent畫到容器中(這裡的容器使用HTML Body Element)
            ReactDOM.render(
                mycomponent,document.body
            );
        })
    </script>
</head>
<body>
</body>
</html>

react event handling事件處理器

  • 程式範例1:























































<!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>My First Component</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!--載入Babel編譯器套件-->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <style type="text/css">
       .head-3{font-size:24px;font-weight:1.2em;}
    </style>
    <!--包含JSX語法的Javascript必須使用type="text/babel"-->
    <script type="text/babel">

    
        //設計MyHead組件類別
        class MyHead extends React.Component{
            constructor(props){
            super(props);
            this.state={color:"red"};
        }
            render(){
                return <div className={"head-"+this.props.level} 
                style={{color:this.state.color}}
                onClick={this.clickHandler.bind(this)}  //this 要 (綁定 bind) 才可以 ~
                onMouseOver={this.mouseOverHandler.bind(this)}
                onMouseOut={this.mouseOutHandler.bind(this)}>Hello Shawn</div>
                
            }
            mouseOutHandler(e){
                this.setState({color:"red"});
            }
            mouseOverHandler(e){
                this.setState({color:"blue"});
            }
            clickHandler(e){
                  alert("clicked");
                  this.setState({color:"blue"});//不能用this.state.color=blue !!! 
                  //當使用者點擊,將顏色換掉
            }
        }
        window.addEventListener("load",()=>{
            ReactDOM.render(
                <MyHead level="3"/>,document.body
            );
        })
    </script>
</head>
<body>
</body>
</html>

react form handling 表單處理

  • 程式範例1:





















<!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>Event Object</title>
    <script type="text/javascript">
class Myform extends React.Component{
    render(){
        //在表單中註冊onSubmit事件
        return <form onSubmit={this.handleSubmit.bind(this)}>
            <input type="text"/>
            <input type="submit" value="Submit"/>
            </form>
    }
    handleSubmit(e){
        e.preventDefaullt();//可停止瀏覽器預設的表單處理動作
        console.log("表單送出")//使用者點擊Submit送出表單後,在此進行處理
    }
}
  • 程式範例2:


























<!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>Event Object</title>
    <script type="text/javascript">
class Myform extends React.Component{
    constructor(props){
        super(props);
        this.state={text:""};//初始化state.紀錄單行輸入框的資料
    }
    render(){
        //在單行輸入框中設定value屬性,讓介面反應資料變更
        return <form onSubmit={this.handleSubmit.bind(this)}>
            <input type="text" value={this.state.text}/>
            <input type="submit" value="Submit"/>
            </form>;
    }
    handleSubmit(e){
        e.preventDefaullt();//可停止瀏覽器預設的表單處理動作
        console.log("表單送出")//使用者點擊Submit送出表單後,在此進行處
    }
}
  • 程式範例3:
    • 利用onChange追蹤輸入元件的資料變更



























<!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>Event Object</title>
    <script type="text/javascript">
class Myform extends React.Component{
    constructor(props){
        super(props);
        this.state={text:""};// 初始化state. 紀錄單行輸入框的資料
    }
    render(){
        //在 單行輸入框中 註冊 onChange 事件
        return <form onSubmit={this.handleSubmit.bind(this)}>
            <input type="text" value={this.state.text}
              onChange={this.handleTextChange.bind(this)}/>
            <input type="submit" value="Submit"/>
        </form>;
    }
    handleTextChange(e){//處理資料變更的事件處理器
        //e.currentTarget();//--->可以取得觸發事件的 html element
        this.setState({text:e.currentTarget.value});//使用者單行輸入框中資料
    }
}
  • 程式範例4:
    • 利用value屬性表達textarea(多行輸入框)的輸入



























<!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>Event Object</title>
    <script type="text/javascript">
class Myform extends React.Component{
    constructor(props){
        super(props);
        this.state={textarea:""};// 初始化state. 紀錄單行輸入框的資料
    }
    render(){
        //在 多行輸入框中設定value屬性, 並註冊 onChange 事件
        return <form onSubmit={this.handleSubmit.bind(this)}>
            <textarea value={this.state.textarea}
              onChange={this.handleTextareaChange.bind(this)}/>
            <input type="submit" value="Submit"/>
        </form>;
    }
    handleTextareaChange(e){//處理資料變更的事件處理器
        //e.currentTarget();//--->可以取得觸發事件的 html element
        this.setState({textarea:e.currentTarget.value});//使用者單行輸入框中資料
    }
}
  • 程式範例5:
    • 利用value屬性表達select的選擇






























<!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>Event Object</title>
    <script type="text/javascript">
class Myform extends React.Component{
    constructor(props){
        super(props);
        this.state={selected:"male"};// 初始化state. 紀錄單行輸入框的資料
    }
    render(){
        //在 下拉選單 中設定 value 屬性, 並註冊 onChange 事件
        return <form onSubmit={this.handleSubmit.bind(this)}>
            <select value={this.state.selected}
            onChange={this.handleSelectChange.bind(this)}>
            <option value="male">男</option><option value="female">女</option>
           </select>
           <input type="submit" value="Submit" />
           </form>
    }
    handleSelectChange(e){//處理資料變更的事件處理器
        
        this.setState({selected:e.currentTarget.value});
    }
}
Last changed by 
 
blockchain_security
_shawn intern_notes
0
293

Read more

Signature On-chain Minter Automation

[TOC] Connect to the local blockchain by ganache-cli &#x6703;&#x4F7F;&#x7528;&#x4E00;&#x7D44;Private key &#x4F5C;&#x70BA;&#x9023;&#x7DDA;metamask Smart contract migrated to the local blockchain--->transactions deployed SmartContract.json--->&#x64C1;&#x6709;ABI &#x524D;&#x7AEF;react&#x4ECB;&#x9762; &#x4E32;&#x63A5;&#x597D;metamask &#xFF0B; &#x53EF;&#x4EE5;&#x4E00;&#x9375; automation deploy &#x667A;&#x80FD;&#x5408;&#x7D04;

Jun 18, 2022
Untitled

May 26, 2022
Deploy NFT 細節流程

[TOC] &#x767C;&#x5E03;&#x667A;&#x80FD;&#x5408;&#x7D04;--->&#x6BCF;&#x4E00;&#x500B;NFT&#x6703;deploy&#x4E00;&#x4EFD;&#x667A;&#x80FD;&#x5408;&#x7D04;&#x5C08;&#x5C6C;&#x7684;contract address---->&#x540C;&#x4E00;&#x4EFD;contract address&#x53C8;&#x6709;&#x6578;&#x500B;&#x7279;&#x5B9A;&#x7684;transaction hash(Block,nounce...etc) &#x6280;&#x8853;&#x540D;&#x8A5E;&#x5206;&#x985E; account address--->==0x0B51C6034725e3c0575E48560077C7eF61d92dB9== ![](https://i.imgur.com/spuA7ps.png =x359) url

May 21, 2022
Untitled

.web3provider----->&#x524D;&#x7AEF;&#x8207;&#x5408;&#x7D04;&#x4E92;&#x52D5;(&#x9700;&#x8981;&#x63D0;&#x4F9B;provider)--->&#x4E0D;&#x540C;rpc,chainid useState&#x7528;&#x6CD5; useState&#x7528;&#x6CD5;---->array destructing&#x7528;&#x6CD5; array destructing Usestate&#x53C3;&#x8003;&#x5F71;&#x7247;

Apr 20, 2022
Read more from blockchain_security
Published on HackMD