javascript - 在 React 中的 html 输入中转换美分和美元

Question

我的处境有点奇怪，我在我的 we 应用程序中处理货币。在模型方面，我在发送到服务器之前将货币保存为美分，因为我不想在服务器端处理小数点。但是在 View 中，我希望显示正常货币而不是美分。

所以，我有这个输入字段，我从美元中获取数据并将其更改为美分:

<input name="balance" type="number" step="0.01" min="0"
    placeholder="Balance in cents" onChange={this.handleUpdate}
    value={this.props.user.balance / 100} />

当输入值发生变化时，我会在向上游发送之前将其更改回美分:

handleUpdate: function(e) {
  
  var value = e.target.value;
  
  // changing it back from cents to dollars
  value = parseFloat(value) * 100;
  
  // save back to the parent component managing the prop
  this.props.onUserUpdate(value);
  
}

这让我陷入了一种僵局，我无法输入小数点“。”让我演示一下:

输入框中的

1. 33 --> 在父状态中变为3300 --> 在组件中返回为33支持 - 一切顺利

输入框中的

2. 33.3 --> 在父状态中变为 3330 --> 在父状态中返回为 33.3组件 prop - 都很好

3. 33. in the input box --> 变成 3300 in the parent state --> 回到 33 in组件 prop - 这就是问题所在

正如您在案例 #3 中看到的那样，当用户首次输入“.”时这不会转换回与“。”相同的数字

因为是受控输入，所以基本上没法写“.”

我已经尝试使用带有 defaultValue 的不受控元素，但是 amount 属性在组件呈现时还没有准备好，所以它只是空的

http://jsfiddle.net/fpbhu1hs/

Answer 1

使用派生值的受控输入可能很棘手 - 如果您需要能够显示无效或其他奇怪的输入，那么...

1. 始终将输入的值保存在其组件自己的state

   中

   <input value={this.state.value} onChange={this.handleUpdate} // rest as above...
   

2. 在getInitialState()中导出初始值

   getInitialState: function() {
     return {value: this.props.user.balance / 100}
   }
   

3. 实现 componentWillReceiveProps(nextProps) 以检测 prop 的值何时从上方发生变化并重新导出状态值

   componentWillReceiveProps: function(nextProps) {
     if (this.props.user.balance != nextProps.user.balance) {
       this.setState({value: nextProps.user.balance / 100})
     }
   }
   

现在，当用户输入“33.”时，您使用 setState() 存储他们的文字输入，然后回调给父级。

handleUpdate: function(e) {
  var value = e.target.value
  this.setState({value: value})
  this.props.onUserUpdate(parseFloat(value) * 100)
}

如果父级随后通过 props 传递回子级的值没有改变(在本例中为 3300 == 3300)，则 componentWillReceiveProps() 获胜'做任何事情。

工作片段:

<script src="http://fb.me/react-with-addons-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<div id="example"></div>
<script type="text/jsx;harmony=true">void function() { 'use strict';

var Parent = React.createClass({
  getInitialState() {
    return {cents: 3300}
  },
  
  _changeValue() {
    this.setState({cents: Math.round(Math.random() * 2000 + Math.random() * 2000)})
  },

  _onCentsChange(cents) {
    this.setState({cents})
  },

  render() {
    return <div>
      <p><strong>Cents:</strong> {this.state.cents.toFixed(0)} <input type="button" onClick={this._changeValue} value="Change"/></p>
      <Child cents={this.state.cents} onCentsChange={this._onCentsChange}/>
    </div>
  }
})

var Child = React.createClass({
  getInitialState() {
    return {dollars: this.props.cents / 100}
  },

  componentWillReceiveProps(nextProps) {
    if (this.props.cents != nextProps.cents) {
      this.setState({dollars: nextProps.cents / 100})
    }
  },

  _onChange(e) {
    var dollars = e.target.value
    this.setState({dollars})
    if (!isNaN(parseFloat(dollars)) && isFinite(dollars)) {
      this.props.onCentsChange(parseFloat(dollars) * 100)
    }
  },

  render() {
    return <div>
      <input type="number" step="0.01" min="0" value={this.state.dollars} onChange={this._onChange}/>
    </div>
  }
})

React.render(<Parent/>, document.querySelector('#example'))

}()</script>