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

下面內容代碼使用ES6語法

1、組件的操做事件：

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

 handleClick() {
//TODO
}

 

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

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

 

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

 render() {

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

通過以上操做即會觸發監聽事件方法

 

2、組件狀態state

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

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

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

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

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

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

 

3、路由

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

一、安裝插件

npm install -S react-router

二、使用

使用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參數設置能夠去官網查看。