无法在ReactJS中相互更改兄弟姐妹的值

Question

我有一个包含两个字段的组件，它是一个转换器。它在lbs和kg之间转换。我正在尝试编写一个组件，其中用户输入的任何输入，即lbs或kg，其他输入字段基于它进行更新。代码适用于单个输入。您选择操作的第一个输入更新另一个正常，但如果您更改另一个，它不起作用。

我做错了什么..

代码笔网址：http://codepen.io/chesshouse/pen/zZOgVG

HTML code：

<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'),
);