React实现双向绑定示例代码

머리말

React.js는 지금 이미 매우 유명합니다. React.js를 모르면 프론트엔드를 자부하는 것도 부끄러울 정도입니다.

그래서 아래에서 React 양방향 바인딩 구현에 대해 살펴보겠습니다.

양방향 바인딩 사용:

컴포넌트는 mixins: LinkedStateMixin을 참조해야 합니다. 이는 linkState 메서드를 제공합니다.

매개변수는 state 속성입니다.

양방향 바인딩은 valueLink={this.linkState(XX)}로 사용됩니다.

linkState 메서드는 value属性를 가진 객체를 반환합니다. 이 객체는 state의 속성을 지정합니다.

requestChange 콜백 메서드가 state 수정을 위해 사용됩니다. 매개변수는 새 값입니다.

onchange 바인딩 메서드로 이해할 수 있습니다. linkState 객체를 작성할 수 있으며, value는 state.XX, requestChange에서 setState()를 사용하여 값을 수정합니다. valueLink={obj}로 구현합니다.

this.linkstate()가 실제로 지정한 바인딩 값 value와 change 메서드를 이해할 수 있습니다.

valueLink 속성은 linkstate.value를 value에 바인딩하고 requestChange 메서드를 onchange에 바인딩합니다.

this.linkState('XX') value={XX.value} onchange={fn} 메서드 내에서 Xx.requestChange(e.target.value)를 사용할 수 있습니다.

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

결론:linkState() 메서드는 state 속성과 change 메서드를 제공합니다. valueLink={}을 통해 value와 change 이벤트를 바인딩합니다.

아래는 구현 코드입니다.

/*기본 표单 양방향 바인딩
   * state를 수정하기 위해 각 input에 change 이벤트를 바인딩합니다.
   * 라벨에 추가된 바인딩이 많다면 그렇지 않습니다.
   * 따라서 react는 저에게 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></Box1>, document.querySelector('#div1))
   /*ReactLink은 onchange setState 모델의 간단한 包装과 규약을 제공합니다. 이는 그의 줄임말 방식입니다.
   * 1mixins에 참조를 추가해야 합니다.
   * 2원래의 value 바인딩을 valueLink로 변경합니다. 매개변수는 this.state.XX에서 this.linkState('XX')로 변경하면 됩니다.
   */
   /*ReactLink 해석
   * LinkedStateMixin은 컴포넌트에 linkState 메서드를 추가합니다. 매개변수는 state 속성 이름입니다.
   * 그것은 현재 상태 값과 값을 변경하는 콜백을 포함한 reactlink 객체를 반환합니다.
   * reactlink는 컴포넌트 간에 props를 통해 전달될 수 있습니다.
   */
   var Box2=React.createClass({
   mixins:[React.addons.LinkedStateMixin],//추가 참조
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   render:function(){//바인딩할 때 속성을 value에서 valueLink로 변경하려면 this.linkState 메서드를 호출해야 합니다
    return (
    <div>
     <input type="text" valueLink={this.linkState('name')} />   <br/>
     <input type="checkbox" checkedLink={this.linkState('bool')} />
    </div>   
    );
   }
   })
   React.render(<Box2></Box2>, document.querySelector('#div2))
   /*기본 원리
   * reactlink 객체는 실제로 value 속성과 requestChange 메서드만 있으며, value 값은 state입니다. 메서드는 state 값을 변경합니다
   * 
   */
   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></Box3>, document.querySelector('#div3))
   /*valuelink
   * 그것은 실제로 상태의 바인딩과 change 이벤트의 수정을 실현합니다
   * requestChange 메서드는 값을 받아 state를 수정합니다
   */
   var Box4=React.createClass({
   mixins:[React.addons.LinkedStateMixin],//추가 참조
   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={valuelink2.value} onChange={handlenboolchange} />
    </div> 
    )
   }
   });
   React.render(<Box4></Box4>, document.querySelector('#div4))

------------------------ReactLink 객체 전달

자식 컴포넌트에 전달할 수 있습니다:

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

자식 컴포넌트 내에서:

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

props를 통해 valueLink에 연결하고 바인딩합니다.

또한 this.props.linkname.requestChange() 메서드를 사용하여 값을 수정할 수 있습니다.

그들의 변화는 부모 컴포넌트에 동기화되어 태그를 갱신합니다.

결론

이것이 이 문서의 전체 내용입니다. 이 문서의 내용이 여러분의 학습이나 업무에 도움이 되길 바랍니다. 의문이 있으면 댓글을 통해 교류해 주세요.

선언: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 이 사이트는 소유권을 가지지 않으며, 인공적인 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으면, notice#w 이메일로 보내 주시기 바랍니다.3codebox.com（이메일을 보내는 경우, #을 @으로 변경하십시오. 신고하시고 관련 증거를 제공하시면, 사이트는 즉시 저작권 침해 내용을 삭제합니다.