在React中的html输入中转换美分和美元 [英] translating between cents and dollars in html input in React

问题描述

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

I'm in a bit of a weird situation, I am dealing with currency in my we app. On the model side, I am saving currency as cents before sending to the server as I don't want to deal with decimal points on the server side. In the view however, I want the to display normal currency and not cents.

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

So, I have this input field where I take the data from dollars and change it to cents:

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

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

And when there's a change in the input value, I change it back to cents before sending it upstream:

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

}

这让我陷入僵局，没有办法为我输入小数点。让我演示一下：

This puts me in kind of a deadlock, there's no way for me to enter a decimal point "." Let me demonstrate :

1. 33 在输入框中 - >在父状态中变为 3300 - >在组件道具中返回 33 - 一切正常

1. 33 in the input box --> becomes 3300 in the parent state --> goes back as 33 in component prop - all good

33.3 在输入框中 - >变为 3330 在父状态 - >在组件道具中返回为 33.3 - 全部好

33.3 in the input box --> becomes 3330 in the parent state --> goes back as 33.3 in the component prop - all good

33。在输入框中 - >变为 3300 in父状态 - >在组件道具中返回 33 - 这是问题

33. in the input box --> becomes 3300 in the parent state --> goes back as 33 in the component prop - this is the problem

正如您在第3种情况中所见，用户首次输入。这不会转换回与。相同的数字。

As you can see in case #3, when the user first enters "." this doesn't translate back to the same number with "."

由于它是受控输入，因此基本上没有办法写。

Since it's a controlled input, there's basically no way of writing "."

我尝试使用 defaultValue 的不受控制的元素，但是在组件渲染时，prop的数量尚未准备就绪，因此它只是空的

I have tried using uncontrolled element with defaultValue, but the amount prop is not ready the time the component is rendered so it's just empty

http://jsfiddle.net/fpbhu1hs/

推荐答案

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

Controlled inputs using derived values can be tricksy - if you need to be able to display invalid or otherwise weird input then...

1. 始终在其组件自己的状态中保存输入的值 / code>

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

派生初始值 in getInitialState（）

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

实现 componentWillReceiveProps（nextProps）以检测道具的值何时从上方变化并重新获得状态值

implement componentWillReceiveProps(nextProps) to detect when the prop's value is changing from above and re-derive the state value

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

现在，当用户输入33.时，使用 setState（）存储他们的文字输入，然后调用回到父母。

Now when the user enters "33.", you store their literal input using setState(), then call back to the parent.

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

如果父母通过道具传回给孩子的价值没有改变（ 3300 == 3300 in这种情况），然后 componentWillReceiveProps（）将不会做任何事情。

If the value the parent then passes back down to the child via props hasn't changed (3300 == 3300 in this case), then componentWillReceiveProps() won't do anything.

工作片段：

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

这篇关于在React中的html输入中转换美分和美元的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！