D2.Reactjs 操作事件、狀態改變、路由

下面內容代碼使用ES6語法

一、組件的操作事件：

1、先要在組件類定義內定義操作事件的方法，如同event handler。若我需要監聽在組件內的Button的點擊事件onClick，首先定義監聽方法，代碼如下：

 handleClick() {
//TODO
}

 

2、在contructor 函數，bind(this)。

 constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

 

3、在render方法內，顯式綁定事件

 render() {

        return <div>
            <button onClick={this.handleClick}>click</button>
        </div>;
    }

經過以上操作即會觸發監聽事件方法

 

二、組件狀態state

　　組件，我理解其實就是wpf的控件，那么state就是wpf中的依賴屬性了，其功能如依賴屬性其中的功能很類似，state的改變會改變組件的UI變化或者進行一些邏輯操作。

1、設置初始狀態，即在contructor函數上設置組件初始state,

 constructor(props) {
        super(props);
        this.state = {
            liked: false,
            opacity: 1
        };
    }

2、在事件中可以利用setState()設置新的狀態，如在handleclick事件改變state，如下：

handleClick() {
        this.setState({ liked: !this.state.liked });
    }

state改變后促使組件重新執行render()，進而改變了UI。

 

三、路由

　　reactjs可以使用單頁面搭建整個網站或者APP，那么路由機制就十分需要，方便我們來實際一個頁面來構建多個頁面和頁面的架構。React-Router是一個十分實用的官方插件，提供進行導航等操作。

1、安裝插件

npm install -S react-router

2、使用

使用react-router 就像使用一般的插件，如下：

import React from 'react';
import { render } from 'react-dom';
import { Router, Route,IndexRoute, Link, browserHistory, hashHistory } from 'react-router';
import App from './compoments/App';
import ABout from './compoments/ABout';
import Home from './compoments/Home';
render((<Router history={browserHistory}>
    <Route path="/" component={App} >
     <IndexRoute component={Home}/>
        <Route path="/home" component={Home} />
        <Route path="/about" component={ABout} />
    </Route>

</Router>), document.getElementById("container"));

其中App,Home,About 都是其他文件定義的組件。

　　Router的history屬性設置是設置Router將使用哪種URL，例如使用hashHistory，路由的切換由URL的hash變化決定，即URL的#部分發生變化，即上面訪問about頁面，URL路徑將是localhost:8080/#/about;例如使用browserHistory,將會調用瀏覽器的URL，即訪問about頁面，URL路徑將是localhost:8080/about。

　　更多Router參數設置可以去官網查看。