---
# System prepended metadata

title: 區塊鏈前端框架react開發基礎實戰教學文件
tags: [區塊鏈, Dapp]

---

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


[TOC]

###### tags: `Dapp` `區塊鏈`
----
![](https://i.imgur.com/CpdzkSG.jpg)

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


## 非同步問題
* [參考文章](https://wcc723.github.io/development/2020/10/16/async-await/)
* [callback大師](https://blog.techbridge.cc/2019/10/05/javascript-async-sync-and-callback/)

----
## component 設計組件類別
* 程式碼範例1--->
 ```javascript=
<!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--->
```javascript=
<!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--->
 ```javascript=
<!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--->
```javascript=
<!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
```javascript=
<!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--->
``` javascript=
<!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--->

``` javascript=
<!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--->
``` javascript=
<!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處理非同步
``` javascript=
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)處理非同步
``` javascript=
<!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--->
``` javascript=
<!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()方法接續動作
``` javascript=
<!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()方法接續失敗
``` javascript=

<!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:
``` javascript=
<!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:
``` javascript=
<!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:
``` javascript=
<!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:
``` javascript=
<!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追蹤輸入元件的資料變更 
``` javascript=
<!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(多行輸入框)的輸入
``` javascript=
<!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的選擇 
``` javascript=
<!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});
    }
}


``` 