javascript – 在React的html输入中翻译美分和美元

前端之家收集整理的这篇文章主要介绍了javascript – 在React的html输入中翻译美分和美元前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有点奇怪的情况,我在我的应用程序中处理货币.在模型方面,我在发送到服务器之前将货币保存为美分,因为我不想在服务器端处理小数点.
但是,在视图中,我希望显示正常货币而不是美分.

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

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

}

这让我陷入僵局,我无法输入小数点“.”让我来证明一下:

> 33在输入框中 – >在父状态下变为3300 – >在组件道具中回归33 – 一切都很好
> 33.3在输入框中 – >在父状态下变为3330 – >在组件道具中返回33.3 – 一切都很好
> 33.在输入框中 – >在父状态下变为3300 – >在组件道具中返回33 – 这就是问题所在

正如您在第3种情况中所看到的,当用户首次输入“.”时这不会转换回与“.”相同的数字.

由于它是一个受控输入,基本上没有办法写“.”

我已经尝试使用带有defaultValue的不受控制的元素,但是在渲染组件的时候,prop的数量还没准备好所以它只是空的

http://jsfiddle.net/fpbhu1hs/

解决方法

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

>始终将输入值保存在组件自身的状态中

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

>在getInitialState()中导出初始值

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

>实现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>
原文链接:https://www.f2er.com/js/159060.html

猜你在找的JavaScript相关文章