D2.Reactjs 操作事件状态改变路由

Posted NEIL_X

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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参数设置可以去官网查看。

以上是关于D2.Reactjs 操作事件状态改变路由的主要内容,如果未能解决你的问题,请参考以下文章

当以太网适配器状态改变 Python 时触发事件

根据 ReactJs 中的事件改变状态

单页面路由实现原理-hash

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置