형제 값을 ReactJS에서 상호 변경 할 수 없음

Question

두 개의 필드가있는 구성 요소가 있는데 변환기입니다. 그것은 파운드와 kg 사이의 변환합니다. 사용자가 입력 한 내용이 lbs 또는 kg 인 경우 다른 입력 필드가 변경되는 구성 요소를 작성하려고합니다. 이 코드는 단일 입력으로 작동합니다. 당신이 조작 한 첫 번째 입력은 다른 벌금을 업데이트하지만, 다른 하나를 변경하면 작동하지 않습니다. 내가 잘못 뭐하는 거지

..

코드 펜 URL ​​: http://codepen.io/chesshouse/pen/zZOgVG

HTML 코드 :

<div id="app"></div> 

JS 코드 :

var Converter = React.createClass({ 
    getInitialState: function() { 
    return {}; 
    }, 

    _calc: function (event) { 
    if (event.target.name === 'lbs'){ 
     this.setState({ 
     kg: this.convertToKG(event.target.value), 
     }); 
    } else { 
     this.setState({ 
     lbs: this.convertToLBS(event.target.value), 
     }); 
    } 
    }, 

    convertToLBS: function (kg) { 
    var lbs; 
    lbs = parseInt(kg) * 2.2046226218; 
    return lbs; 
    }, 

    convertToKG: function (lbs) { 
    var kg; 
    kg = parseInt(lbs)/2.2046226218; 
    return kg; 
    }, 

    render: function() { 
    return (
     <div> 
     <label>LBS 
      <input type="text" name="lbs" onChange={this._calc} value={this.state.lbs} /> 
     </label> 
     <label>Kg 
      <input type="text" name="kg" onChange={this._calc} value={this.state.kg} /> 
     </label> 

     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <Converter />, 
    document.getElementById('app'), 
); 

Answer 1

참조하여 _calc 함수의 몸은 하나 개의 값을 설정; 사용자가 입력을 제어 했으므로 입력이 변경되면 각 값을 명시 적으로 업데이트해야합니다.

_calc: function (event) { 
    if (event.target.name === 'lbs'){ 
     this.setState({ 
     lbs: event.target.value, // Add this 
     kg: this.convertToKG(event.target.value), 
     }); 
    } else { 
     this.setState({ 
     lbs: this.convertToLBS(event.target.value), 
     kg: event.target.value // Add this 
     }); 
    } 
    }, 

작업 펜 :

_calc에 2 줄을 추가하면 두 속성의 값을 업데이트 할 수 있습니다 http://codepen.io/oliverfencott/pen/MpWamo?editors=0010

Answer 2

는 두 입력이에서 그 값을 얻을 state,하지만 다른 필드의 값은 chan에서만 업데이트됩니다. ge listener이므로 입력하는 입력에 "이전"상태 값이 있습니다. 수신기에서 state.kg 및 state.lbs을 모두 업데이트하십시오.

도 https://facebook.github.io/react/docs/forms.html#controlled-components

_calc: function (event) { 
    if (event.target.name === 'lbs'){ 
     this.setState({ 
     kg: this.convertToKG(event.target.value), 
     lbs : event.target.value // update the edited input state as well 
     }); 
    } else { 
     this.setState({ 
     lbs: this.convertToLBS(event.target.value), 
     kg : event.target.value // update the edited input state as well 
     }); 
    } 
    }, 

http://codepen.io/anon/pen/qrBOqy?editors=0010