D2. Reactjs operation events, state changes, routing

The following content code uses the ES6 syntax

One, the operation event of the component:

1, first to define the method of operation event within the Component class definition, like event handler. If I need to listen for the Click event OnClick of the button within the component, first define the listening method, the code is as follows:

Handleclick () {//TODO}

2, in the Contructor function, bind (this).

Constructor (props) {        super (props);          This this. Handleclick.bind (this);    }

3. Explicitly bind an event within the Render method

render () {        return <div>            <button onclick={this. Handleclick}>click </button>        </div>;    }

The Listener event method is triggered by the above operation

Second, Component Status state

component, which I understand is actually a WPF control, then state is a dependency property in WPF, and its functionality is similar to that of a dependency property, where state changes change the UI of a component or perform some logical operations.

1, set the initial state, that is, on the Contructor function to set the component initial States,

Constructor (props) {        super (props);         this. State = {            false,            1        };    }

2, in the event can be used SetState () to set a new state, such as in the Handleclick event to change states, as follows:

Handleclick () {        this. SetState ({liked:!  this. state.liked});    }

The state changes the UI by prompting the component to re-execute render ().

Third, routing

Reactjs can use a single page to build the entire site or app, then the routing mechanism is very much needed, so that we come to the actual page to build multiple pages and pages of the architecture. React-router is a very useful official plug-in, providing navigation and other operations.

1, install the plug-in

NPM install-s React-router

1. function

Using React-router is like using a generic plug-in, as follows:

Import React from ' React 'react-dom' react-router'./compoments/app '. compoments/about './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"));

Where app,home,about are components that are defined by other files.

The History property setting for router is to set which URL router will use, such as using hashhistory, which is determined by the hash change of the URL, that is, the part of the URL changes, that is, the above access to the About # page, The URL path will be localhost:8080/#/about; for example, with Browserhistory, the URL of the browser will be called, that is, to access the About page, and the URL path will be localhost:8080/about.

More router parameter settings can be viewed on the official website.

D2. Reactjs operation events, state changes, routing