Preface
It's very popular now, so I'm embarrassed to say that I know the front-end.
So let’s take a look at the implementation of React two-way binding.
Use of two-way binding:
Components require mixins: Reference LinkedStateMixin. It provides a linkState method.
The parameter is the state property
For two-way bindingvalueLink={(XX)}
The linkState method returns an object with a value attribute that specifies the state's attribute.
There is also a requestChange callback method used to implement state modification. The parameter is the new value
It can be understood as the binding method of onchange. You can write a linkState object yourself, the value is requestChangeUsed insetState()to modify the value. usevalueLink={obj}To achieve it.
It can be understood as()What is implemented is to specify the binding value value and change method
The valueLink property is implementedBind to value requestChange method bind onChange
Can be createda ('XX') value={} onchange={fn}Use within the method()
-------------------------
summary:linkState()Methods provide state attributes and change methods.valueLink={}To implement the binding of value and change events.
The following is the implementation code
/*Default form two-way binding
* Bind change event for each input to implement modification of state
* If there are more bindings on the tag, it will definitely not work.
* So react gives me a prompt reactLink
*/
var Box1=({
getInitialState:function(){
return {
name:'star',bool:true
}
},
handlNameChange:function(event){
({name:});
},handlboolChange:function(event){
({bool:})
},
render:function(){
return (
<div>
<input type="text" value={} onChange={}/> <br/>
<input type="checkbox" checked={} onChange={} />
</div>
)
}
}) ;
(<Box1></Box1>,('#div1'));
/*ReactLink only provides simple wrapping and conventions for the onchange setState pattern. It's the abbreviation of
* 1. Mixins need to add reference
* 2. Change the original value binding to valueLink. Change the parameters from ('XX') so that you can
*/
/*ReactLink analysis
* LinkedStateMixin adds a linkState method to the component, and the parameter is the state property name.
* It returns a reactlink object containing the current value of state and a callback that changes the value.
* reactlink can be passed between components through props
*/
var Box2=({
mixins:[],//Add a quote getInitialState:function(){
return {
name:'star',bool:true
}
},
render:function(){//When binding, the property needs to be called by method return (
<div>
<input type="text" valueLink={('name')} /> <br/>
<input type="checkbox" checkedLink={('bool')} />
</div>
);
}
})
(<Box2></Box2>,('#div2'));
/*Bottom Principle
* The reactlink object is actually only a value attribute and a requestChange method, and the value value is state. Method implementation to modify state value
*
*/
var Box3=({
getInitialState:function(){
return {
name:'star',bool:true
}
},
handlnamechange:function(val){
({name:val})
},
handlboolchange:function(val){
({bool:val})
},
render:function(){
var reactlink={
value:,
requestChange:
}
var reactlink2={
value:,
requestChange:
}
return(
<div>
<input type="text" valueLink={reactlink} /> <br/>
<input type="checkbox" checkedLink={reactlink2} />
</div>
)
}
});
(<Box3></Box3>,('#div3'));
/*valuelink
* It actually implements state binding and change event modification
* The requestChange method receives values to implement the modification of state
*/
var Box4=({
mixins:[],//Add a quote getInitialState:function(){
return {
name:'star',bool:true
}
},
render:function(){
var valuelink=('name');
var handlenamechange=function(e){
()
}
var valuelink2=('bool');
var handlenboolchange=function(e){
()
}
return (
<div>
<input type="text" value={} onChange={handlenamechange} /> <br/>
<input type="checkbox" checked={} onChange={handlenboolchange} />
</div>
)
}
});
(<Box4></Box4>,('#div4'));
--------------------------------------------------------------------------------------------------------------------------------
Can be passed to subcomponents:
linkname={('name')}
In the subcomponent, you can:
<input type="text" valueLink={} >
Reference and bind to valueLink via props.
Can also be used()To modify the value using the method.
Their changes will be synchronized to the parent component. and update the tag.
Summarize
The above is the entire content of this article. I hope the content of this article will be helpful to everyone's study or work. If you have any questions, you can leave a message to communicate.