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

Question

我有一个组件有两个字段，它是一个转换器。它在 lbs 和 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

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

Answer 2

你的 _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

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

Can't Change values of Siblings Reciprocally in ReactJS

reactjs

jsx

react-dom