在React中的html输入中在美分和美元之间进行转换

IT技术 javascript reactjs
2021-03-29 14:40:39

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

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

<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在组件 prop 中一样返回-一切都很好

  2. 33.3在输入框中 --> 成为3330父状态 --> 像33.3在组件props中一样返回-一切都很好

  3. 33.在输入框中 --> 变为3300父状态 --> 像33在组件props中一样返回-这就是问题所在

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

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

我曾尝试将不受控制的元素与 一起使用defaultValue，但数量props在组件呈现时尚未准备好，因此它只是空的

http://jsfiddle.net/fpbhu1hs/

2个回答

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

  1. 始终将输入保留value在其组件中state

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

  2. 推导出初始value在getInitialState()

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

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

    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>

非常好 ！思考 React 确实需要一些调整……谢谢！
2021-05-29 14:40:39
您的示例适用于 React 0.14.0 jsfiddle.net/7h5o97wL但不适用于 React 15.4.2 jsfiddle.net/69z2wepo/73775
2021-06-06 14:40:39

我正在使用这个简单的解决方案来处理受控输入和十进制值。

  1. 在您的状态中创建两个props，一个用于保存实际值，另一个用于保存字符串。

    constructor(props) {
    ....

    this.state = {
        myProperty: 1.42,
        myPropertyString: '1.42'
    }
}

  2. 将您的输入值设置为字符串一

    <input type="text"
       onChange={this.handleUpdate}
       value={this.state.myPropertyString}/>

  3. 在handleUpdate方法中更新两个状态变量。

    handleUpdate(e) {
    this.setState({
        myProperty: parseFloat(e.target.value),
        myPropertyString: e.target.value
    });
}
其它你可能感兴趣的问题
上一篇在 reactJS 中显示 PDF 下一篇将 Bootstrap 4 与 React 结合使用