ReactJSで兄弟の値を相互に変更できない

Question

私は2つのフィールドを持つコンポーネントを持っています。これはコンバーターです。それはポンドと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の他のフィールドの値のみを更新しますあなたが入力している入力には「古い」状態値があります。リスナーに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