Example Code for Two-way Binding in React

Preface

React.js is now very popular, and it's not ashamed to say that you know front-end without knowing React.js.

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

Usage of two-way binding:

The component needs to use mixins: LinkedStateMixin. It provides a linkState method.

The parameter is the state attribute

For two-way binding, use valueLink={this.linkState(XX)}

The linkState method returns an object with a value property, specifying the state attribute.

There is also a requestChange callback method used to modify the state. The parameter is the new value.

It can be understood as the binding method of onchange. You can write a linkState object yourself, where the value is state.XX, and use setState() to modify the value in requestChange. It is implemented with valueLink={obj}.

It can be understood that this.linkstate() actually implements the binding of the specified binding value value and change method

The valueLink attribute implements the binding of linkstate.value to value and requestChange method binding onChange

You can create a this.linkState('XX') value={XX.value} onchange={fn} method inside and use Xx.requestChange(e.target.value)

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

Summary:The linkState() method provides state attributes and change methods. valueLink={} is used to bind value and change events.

The following is the implementation code

/*Default two-way binding of the form
   * Bind change events to each input to implement modifications to the state
   * If there are multiple bindings in the tag, it is definitely not okay
   * So React gives me a hint with reactLink
   */
   var Box1=React.createClass({
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   handlNameChange:function(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></1>,1);
   /*ReactLink simply provides a simple wrapping and convention of the onchange setState mode. It is a shorthand for this.
   * 1A reference needs to be added to mixins
   * 2The original value binding is replaced with valueLink. The parameter changes from this.state.XX to this.linkState('XX') to achieve this.
   */
   /*ReactLink Parsing
   * LinkedStateMixin adds a linkState method to the component, with the parameter being the state attribute name.
   * It returns a reactlink object containing the current state value and a callback for changing the value.
   * reactlink can pass data between components through props
   */
   var Box2=React.createClass({
   mixins:[React.addons.LinkedStateMixin],//add reference
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   render:function(){//When binding, the property from value to valueLink needs to be called using the this.linkState method
    return (
    <div>
     <input type="text" valueLink={this.linkState('name')} />   <br/>
     <input type="checkbox" checkedLink={this.linkState('bool')} />
    </div>   
    );
   }
   })
   React.render(<Box2></2>,2);
   /*Basic principle
   * The reactlink object actually has only one value property and one requestChange method, where the value is the state. The method implements modification of 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,
    requestChange:this.handlboolchange
    }
     return(
      <div>
     <input type="text" valueLink={reactlink} />   <br/>
     <input type="checkbox" checkedLink={reactlink}2} />
    </div> 
     )
   }
   });
   React.render(<Box3></3>,3);
   /*valuelink
   * It actually implements state binding and change event modification
   * the requestChange method receives a value to implement state modification
   */
   var Box4=React.createClass({
   mixins:[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/>
     <input type="checkbox" checked={valuelink}2.value} onChange={handlenboolchange} />
    </div> 
    )
   }
   });
   React.render(<Box4></4>,4);

------------------------ReactLink object passing

You can pass to the child component:

linkname={this.linkState('name')}

The child component can:

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

Bind to valueLink by referencing through props.

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

Their changes will be synchronized to the parent component and update the label.

Summary

That's all for this article. I hope the content of this article can be helpful to everyone's learning or work. If you have any questions, you can leave a message for communication.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)