React - 使用 Dinero.js 格式化输入字段以显示货币

Question

我正在构建一个响应表单，其中包含一些需要用货币格式化的输入。所以需要以$为前缀，加上逗号、小数（2个小数点）。

我找到了这个名为 dinerojs.com: https://dinerojs.com/ 的库。

我不确定我做错了什么，但这不是格式化。该字段的工作方式与现在一样，但没有格式。有什么想法吗？

//State
ProductPrice1: number,

//Set inital state
ProductPrice1: Dinero({ amount: 0 }).toFormat('$0,0.00'),

//handle bind
this.handleChangeProductPrice1  = this.handleChangeProductPrice1.bind(this);

//Change function
handleChangeProductPrice1y = async (event: any) => {
    const value = parseFloat(event.target.value)
    await this.setState({ ProductPrice1: value });      
}

//in my render
<input
    value={this.state.ProductPrice1}
    onChange={this.handleChangeProductPrice1}
    type="number"
    className="phone validate"
    name="ProductPrice1"                                        
/>

Answer 1

这就是我会做的，离开不格式化的状态并在渲染中进行格式化

//State
ProductPrice1: number,

//Set inital state
ProductPrice1: 0,

//handle bind
this.handleChangeProductPrice1  = this.handleChangeProductPrice1.bind(this);

//Change function
handleChangeProductPrice1y = (event: any) => {
    const value = parseFloat(event.target.value)
    this.setState({ ProductPrice1: value });      
}

//in my render
<input
    value={Dinero({ amount: this.state.ProductPrice1 }).toFormat('$0,0.00')}
    onChange={this.handleChangeProductPrice1}
    type="number"
    className="phone validate"
    name="ProductPrice1"                                        
/>

编辑

你有两个问题：

1. 您需要将输入的类型设置为文本，因为如果您使用数字，它将不接受格式
2. 我检查了 Dinero 文档，无法再次将已格式化为数字的金额转换为数字，因此 parseFloat 不起作用，我认为您需要寻找另一个类似 https://www.npmjs.com/package/react-currency-input 的库

编辑 2

也许你可以让它替换字符（$、, 和 .），这样你就只保留这样的数字

  handleChangeProductPrice = (event: any) => {
    const value = event.target.value;
    const number = value.replace(/\$|,|\./g, "");
    setProductPrice(parseInt(number, 10));
  };

Answer 2

只是

<input
    value={this.state.ProductPrice1}
    onChange={(event) => this.setState({ ProductPrice1: Dinero({ amount: event.target.value }).toFormat('$0,0.00') })}
    type="number"
    className="phone validate"
    name="ProductPrice1"                                        
/>

应该可以。

这有帮助。