Question

我已经制作了这个＆＃34;货币转换器＆＃34;了解React的工作原理。

它有效（或多或少）但结果显示为偏移量：

您键入＆＃34; 1＆＃34; （欧元）=＆gt;它显示＆＃34; 0 Dollar＆＃34;。

您键入＆＃34; 10＆＃34; =＆GT;它显示＆＃34; 1.1308 Dollar＆＃34;。

您键入＆＃34; 100＆＃34; =＆GT;它显示＆＃34; 11.308 Dollar＆＃34;。

...

＆＃13;

var Display = React.createClass({
  render: function() {
    return (
      <div>
        <p>{this.props.euro + ' Euro are equal to ' + this.props.dollar + ' Dollar.'}</p>
      </div>
    )
  }
});

var Converter = React.createClass({
  getInitialState: function() {
    return { euro: 0, dollar: 0, exchangeRate: 1.1308 }
  },
  convertEuroToDollar: function() {
    this.setState({ euro: +document.querySelector('#amount-euro').value });  
    this.setState({ dollar: this.state.euro * this.state.exchangeRate });
  },
  render: function() {
    return (
      <div>
        <input type="text" id="amount-euro" onKeyUp={this.convertEuroToDollar} />
        <Display dollar={this.state.dollar} euro={this.state.euro} exchangeRate={this.state.exchangeRate} />
      </div>
    )
  }
});

ReactDOM.render(
  <Converter />,
  document.querySelector('#app')
);

＆＃13;

div {
  margin: 30px 50px;
}

＆＃13;

<div id="app"></div>

＆＃13;

CodePen上的现场演示：http://codepen.io/mizech/pen/vGbJxe

它应该立即显示结果（euro * exchangeRate）。

我在这里做错了什么？

Answer 1

毕竟调用两个setStates，你没有正确设置euro状态。
作为异步，你仍然使用它的旧值。

来自文档：

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。

https://facebook.github.io/react/docs/component-api.html

要解决此问题，请执行以下操作：

convertEuroToDollar: function() {
  const euro = +document.querySelector('#amount-euro').value
  this.setState({
    euro: euro,
    dollar: euro * this.state.exchangeRate
  });
},

修复示例：http://codepen.io/FezVrasta/pen/xVeMMX

我发现第二个问题，使用ref代替document.querySelector会更好。

convertEuroToDollar: function() {
  const euro = +this.refs.amountEuro.value;
  this.setState({
    euro: euro,
    dollar: euro * this.state.exchangeRate
  });
},
render: function() {
  return (
    <div>
      <input type="text" ref="amountEuro" onKeyUp={this.convertEuroToDollar} />
      <Display dollar={this.state.dollar} euro={this.state.euro} exchangeRate={this.state.exchangeRate} />
    </div>
  )
}

React-App：支持在下一个事件

1 个答案: