# 區塊鏈前端框架react開發基礎實戰教學文件
[TOC]
###### tags: `Dapp` `區塊鏈`
----
#### 建議了解 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});
}
}
```
Sign in with Wallet
Connect another wallet