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 不格式化，并在渲染中进行格式化

//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/反应货币输入

编辑 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"                                        
/>

应该管用。

跳这有帮助。