React two-way binding

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 (event.target);  This. SetState ({message:event.target.value})}, 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 Event.target 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