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>        );    }}