D2. Reactjs operation events, state changes, routing

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.