React implement bidirectional Binding sample code _javascript Tips

Objective

React.js is now very popular, not react.js are embarrassed to say that they will front.

So let's take a look at the implementation of react two-way binding.

Use of bidirectional bindings:

Component needs Mixins: reference linkedstatemixin. It provides a linkstate method.

Parameter is State property

Bidirectional binding withvalueLink={this.linkState(XX)}


The Linkstate method returns an object that has a Value property that specifies the state's property.

There is also a Requestchange callback method that is used to implement state modifications. parameter is a new value

Can be understood as a onchange binding method. You can write a Linkstate object yourself, value is state.XX requestChange used setState() to modify the value. Used valueLink={obj} to achieve.

What you can understand this.linkState() is that you specify the binding value value and the Change method

The Valuelink property implements binding linkstate.value to the value Requestchange method binding onchange

You can create a 一个this.linkState('XX') value={XX.value} onchange={fn} method that uses theXx.requestChange(e.target.value)


-------------------------

Summary: linkState() Method provides the state property and the change method. valueLink={}to implement the binding of the value and change events.

Here is the implementation code

/* Default form bidirectional binding * give each input binding change event to be modified state * If the label is more than one binding must not be, * so react gave me a hint reactlink to/var box1=reac T.createclass ({getinitialstate:function () {return {name: ' Star ', Bool:true}}, Handlnamechange:funct
   Ion (Event) {this.setstate ({name:event.target.value}); 
    },handlboolchange:function (event) {this.setstate ({bool:event.target.checked})}, Render:function () {return (
     <div> <input type= "text" Value={this.state.name} onchange={this.handlnamechange}/> <br/>
   <input type= "checkbox" Checked={this.state.bool} Onchange={this.handlboolchange}/> </div>)}
   }) ;
   
   React.render (<box1></box1>,document.queryselector (' #div1 ')); /*reactlink is only a simple wrapper and convention that provides a onchange setstate pattern. is its shorthand * 1, need mixins Add Reference * 2, the original value binding to Valuelink.
   Parameters from This.state.XX to This.linkstate (' XX ') so you can * * */*reactlink Resolution * Linkedstatemixin to add a Linkstate method to the component, the parameter is the State property name. * It returns a ReactliThe NK object, which contains the state current value and a callback that changes the value. * Reactlink can be passed through props/var box2=react.createclass between components ({mixins:[react.addons.linkedstatemixin],//Add Reference Geti Nitialstate:function () {return {name: ' Star ', Bool:true}}, Render:function () {//Binding timed attribute from value to Valuelink value required To call return with the This.linkstate method (<div> <input type= "text" valuelink={this.linkstate (' name ')}/> &L
   t;br/> <input type= "checkbox" Checkedlink={this.linkstate (' bool ')}/> </div>);
   
   }) React.render (<box2></box2>,document.queryselector (' #div2 ')); /* Bottom Principle * Reactlink object is actually a value property, and a Requestchange method, the value is state. Method implementation modifies the state value * */var Box3=react.createclass ({getinitialstate:function () {return {name: ' star ', BOOL:
    True}}, Handlnamechange:function (val) {this.setstate ({name:val})}, Handlboolchange:function (val) { This.setstate ({bool:val})}, Render:function () {var reactlink={value: This.state.name, RequestChange:this.handlnamechange} var reactlink2={value:this.state.bool, request   Change:this.handlboolchange} return (<div> <input type= "text" Valuelink={reactlink}/>
   <br/> <input type= "checkbox" Checkedlink={reactlink2}/> </div>)});
   
   React.render (<box3></box3>,document.queryselector (' #div3 ')); /*valuelink * What it actually implements is the binding of the State and the modification of the Change event * Requestchange method receives the value to implement the Modify/Var Box4=react.createclass ({Mix
   ins:[react.addons.linkedstatemixin],//Add Reference Getinitialstate:function () {return {name: ' Star ', bool:true}
    }, Render:function () {var valuelink=this.linkstate (' name '); var handlenamechange=function (e) {Valuelink.requestchange (E.target.value)} var valuelink2=this.linkstate ('
    BOOL ');
     var handlenboolchange=function (e) {Valuelink2.requestchange (e.target.checked)} return ( <div> <input type= "text" Value={valuelink.value} onchange={handlenamechange}/> <br/> <i
   Nput type= "checkbox" Checked={valuelink2.value} Onchange={handlenboolchange}/> </div>)}); React.render (<box4></box4>,document.queryselector (' #div4 '));

------------------------Reactlink Object Delivery

You can pass to a subassembly:

Linkname={this.linkstate (' name ')}

Sub-components can be:

<input type= "text" Valuelink={this.props.linkname} >

Referenced by props and bound to valuelink.

You can also use to modify a value by using a this.props.linkname.requestChange() method.

Their changes are synchronized to the parent component. and update the label.

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can help, if there is doubt you can message exchange.