React Router

• 安裝react-router-dom

yarn add react-router-dom

• 使用方法:
  1.匯入BrowserRouter、Switch、Route

import {BrowserRouter,Switch,Route} from "react-router-dom";

2.建立一個Router的函事組件並將Router規則引入

const Router = () =>(
    <BrowserRouter>
        <Switch>      
            //指定主畫面輸出到App,加上"exact"達到精確匹配,若沒有加上精確匹配
            //會導致就算看到"/Page2"也只會匹配到第一個字元"/"所以就會直接輸出Page1
            <Route path = "/" exact component = {Page1} /> 
            <Route path = "/Page2" component = {Page2} />
            <Route component = {NotFound} /> //設定一個若不是指定的路徑便移動到Not Found組件中
        </Switch>
    </BrowserRouter>
)
export default Router; //輸出組件以供其他引用

Not Found組件:

import React from "react";

const NotFound = () =>(
    <div className = "not-found">
        <h2>Not Found Page</h2> //回傳Not Found Page
    </div>
)
export default NotFound;

合成事件

事件處理

• HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

• React:

<button onClick={activateLasers}> //欲使用js元件需要使用{}
  Activate Lasers
</button>

使用preventDefault阻止默認行為

• React無法返回"false"來阻止React的默認行為，比如說

<a href = "/Page2" className = "button" onclick = {activateLasers}>Click Me</a>

這樣當連結被觸發後他會移動到指定的url，這是a默認的行為,若想阻止a的默認行為必須使用preventDefault。

function handleClick(event) {
  event.preventDefault();
}

<a href = "/Page2" className = "button" onclick = {handleClick}>Click Me</a>

this在jsx中的含意

-在JavaScript中，默認情況下是不會綁定function。如果忘記綁定this.handleClick並將其傳遞給onClick，this將會為undefined。

class Test extends React.Componemt
{
    var msg = "Clicked";
    function handleClick(event) 
    {
        event.preventDefault();
        alert(this.msg); //尚未對this進行綁定，這樣會導致this為undefined造成錯誤。
    }
    
    render()
    {
        return(
            <a href = "/Page2" className = "button" onclick = {handleClick}>Click Me</a>
        );
    }
}

• 手動綁定function
  1.利用bind複製函數並將this所指向的物件(自身class)指定到複製的function中

class Test extends React.Componemt
{
    var msg = "Clicked";
    function handleClick(event) 
    {
        event.preventDefault();
        alert(this.msg); 
    }
    
    render()
    {
        return(
            //利用bind複製函數並將this所指向的物件(自身class)指定到複製的function中
            //但缺點是會使指定的function被不斷複製(若此function被不斷觸發)
            <a href = "/Page2" className = "button" onclick = {handleClick.bind(this)}>
                Click Me
            </a>
        );
    }
}

2.使用箭頭函數會自動將this綁定到指定的函數中

class Test extends React.Componemt
{
    var msg = "Clicked";
    function handleClick(event) 
    {
        event.preventDefault();
        alert(this.msg); 
    }
    
    render()
    {
        return(
            //使用箭頭函數會自動將this綁定到指定的函數中
            //缺點也是會使指定的function被不斷複製(若此function被不斷觸發)
            <a href="/Page2" className = "button" onclick={(event) => this.handleClick(event)}>
                Click Me
            </a>
        );
    }
}

3.利用constructor綁定this

class Test extends React.Componemt
{
    //在物件被創立後便會執行constructor,在此指定this給function
    constructor()
    {
        super();
        //指定此物件的function handleClick = 用bind複製並指定this(自身物件)的handleClick function
        this.handleClick = this.handleClick.bind(this);
    }
    
    var msg = "Clicked";
    function handleClick(event) 
    {
        event.preventDefault();
        alert(this.msg); 
    }
    
    render()
    {
        return(
            //若在constructor中指定的this給function就不用在此處制定
            <a href="/Page2" className = "button" onclick={handleClick}>
                Click Me
            </a>
        );
    }
}

4.使用箭頭函數綁定this給function

class Test extends React.Componemt
{
    var msg = "Clicked";
    //使用箭頭函數綁定this給function
    handleClick = (event) => {
        event.preventDefault();
        alert(this.msg); 
    }
    
    render()
    {
        return(
            <a href="/Page2" className = "button" onclick={handleClick}>
                Click Me
            </a>
        );
    }
}

組件中的事件處理

• 命名和綁定

const el = document.getElementById("btn");
el.addEventListener("onClicked")

<button id = "btn">Click Me</button>

handleClick()
{
    alert("Clicked")
}

<button id = "btn" onClick = "handleClick()">Click Me</button>

handleClick()
{
    alert("Clicked")
}

//this指向此物件，所以可以呼叫此物件的function
//在handleClick後面不需要加括號，若加上括號會導致頁面一刷新就觸發事件
//這種事件處理是"合成事件"
<button className = "button" onClick = {this.handleClick}>Click Me</button>

• 傳遞參數

class Test extends React.Componemt
{
    var msg = "Clicked";
 
    handleClick = (msg,event) => {
        event.preventDefault();
        alert(msg); 
    }
    
    render()
    {
        return(
            //使用箭頭函數將參數傳遞進來(指定的message與event)
            <a href="/Page2" onclick={(event) => handleClick("Clicked",event)}>
                Click Me
            </a>
        );
    }
}

class Test extends React.Componemt
{
    var msg = "Clicked";
 
    handleClick = (msg,event) => {
        event.preventDefault();
        alert(msg); 
    }
    
    render()
    {
        return(
            //使用bind複製函數後將this(輸入參數)、event指定給新的function
            <a href="/Page2" onclick={handleClick.bind(this,"Clicked")}>
                Click Me
            </a>
        );
    }
}