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

Question

我有一个具有两个字段的组件，它是一个转换器。它在磅和公斤之间转换。我正在尝试编写一个组件，其中输入用户更改的内容即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添加2行，您可以更新两个属性的值：

  _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
      });
    }
  },

工作笔：http：//codepen.io/oliverfencott/pen/mpwamo?editors = 0010

Answer 2

两个输入都从state获取其值，但是您仅在更改侦听器中更新另一个字段的值，因此您输入的输入具有"旧"状态值。在听众中更新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