React two-way binding

Source: Internet
Author: User

Previously for the two-way binding concept came from angular.js, and now I use the react.js I'm interested in to implement this way. There are 2 ways to analyze, 1: No plugins, 2: Plug-ins

(Introduction react.js operation omitted ...) )

No plugins:

Create the React component first

var Nolink = react.createclass ({}); React.render (<nolink/>,document.body);

Component is created, an initialization variable is required to display the input data publicly

var Nolink = React.createclass ({getinitialstate:function() {        return {message: '}    }}); React.render (<nolink/>,document.body);

The message initial value is empty, which is the normal project environment that can be set. Below I want to use a input box and a B tag to achieve two-way binding effect, render the required HTML tags

 var  nolink = React.createclass ({ Getinitialstate:  function   () { Span style= "color: #0000ff;" >return  {message: ' } ', Render:  function    () { var  mess = this  .state.message;                 return   ( <div>                <input type= "text" Onchange={this . Handelchange} value={mess}/> <b>{mess}</b> </div> <nolink/>,document.body); 

In the above code, we can clearly see the returned component element, which adds a onChange operation to the input box, which is how to make the input content appear in the B tag when we enter the content, and it is very simple in the react operation.

varNolink =React.createclass ({getinitialstate:function(){        return{message: '}}, Handelchange:function(event) {Console.log (;  This. SetState ({})}, Render:function(){        varMess = This. State.message; return (            <div> <input type= "text" onchange={ This. Handelchange} value={mess}/> <b>{mess}</b> </div>        )    }}); React.render (<nolink/>,document.body);

OnChange directly calls the Handelchange function, where it is only possible to handle the re-assignment of the initialization variable message, to get the initial value in react directly with "this.state. Initial value ", If you want to set the initial value directly with "This.setstate ({Initial value: New value})", the point is clear first I need to set the initial value, and then

My input values are managed directly into the setstate, and when I onchange={this.handelchange} I started to apply Handelchange function here through can directly get the current DOM element object, because I am here with input, get its value in the way ". Value" is OK.

When I render, I define the mess variable to hold the value of the initialization message, the JS notation, the person who knows the JS performance will understand, not to say more. Look at the operation in the browser:

Next way: Plug in the form of

With plugins:

React.js provides us with the Linkstate function, but this function comes from react. Addons. linkedstatemixin, first look at the operation of the source code, first into the React.addons.js to find linkedstatemixin

Here are a few properties that are available in this addons.js, and there are important react animation plugins Csstransitiongroup included. Next we need linkedstatemixin this time so go to this object to see:

Only the Linkstate function is provided here, which directly returns a Reactlink object and gives the parameters directly to the Reactlink object for processing.

React two-way binding

Related Article

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: 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.