Can'；t在ReactJS中交互改变兄弟姐妹的值

我有一个有两个字段的组件，它是一个转换器。它在磅和千克之间转换。我正在尝试编写一个组件，其中无论用户更改什么输入，即lbs或kg，其他输入字段都会根据它进行更新。该代码只适用于单个输入。您选择要操作的第一个输入会更新另一个输入，但如果更改另一个输入，则该输入将不起作用

我做错了什么

代码笔URL:

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

var Converter=React.createClass({
getInitialState:函数（）{
返回{}；
},
_计算：函数（事件）{
如果（event.target.name==='lbs'）{
这是我的国家({
kg:this.convertToKG（事件.目标.值），
});
}否则{
这是我的国家({
lbs:this.convertToLBS（event.target.value），
});
}
},
敞篷车：功能（千克）{
var-lbs；
lbs=parseInt（千克）*2.2046226218；
返回lbs；
},
CONVERTOKG：功能（lbs）{
var-kg；
kg=parseInt（lbs）/2.2046226218；
返回千克；
},
render:function（）{
返回(
磅
公斤
);
}
});
ReactDOM.render(
,
document.getElementById（'app'），
);

两个输入都从

状态获取其值，但您只更新更改侦听器中另一个字段的值，因此您键入的输入具有“旧”状态值。更新侦听器中的
state.kg
和
state.lbs

另见

两个输入都从
状态获取其值，但您只更新更改侦听器中另一个字段的值，因此您键入的输入具有“旧”状态值。更新侦听器中的
state.kg
和
state.lbs

另见

您的
\u calc
函数的主体仅设置一个值；假设您有受控输入，那么在更改输入时需要显式更新每个值

通过在
\u 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
      });
    }
  },

工作笔：
您的
\u calc
函数的主体仅设置一个值；假设您有受控输入，那么在更改输入时需要显式更新每个值

通过在
\u 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
      });
    }
  },

工作笔：