React implement bidirectional Binding sample code _javascript Tips

Source: Internet
Author: User

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.

Related Article
Large-Scale Price Reduction
  • 59% Max. and 23% Avg.
  • Price Reduction for Core Products
  • Price Reduction in Multiple Regions
undefined. /
Connect with us on Discord
  • Secure, anonymous group chat without disturbance
  • Stay updated on campaigns, new products, and more
  • Support for all your questions
undefined. /
Free Tier
  • Start free from ECS to Big Data
  • Get Started in 3 Simple Steps
  • Try ECS t5 1C1G
undefined. /

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.