欧元货币格式

Question

我正在开发一个组件，该组件可以格式化值以不同的格式呈现，例如带有逗号和点的美元和欧元。我有一个有效的美元输入但是我的欧元输入不起作用并且输入没有得到我输入的正确值，我尝试了不同的解决方案但无法找出缺失的部分。这是组件和沙箱的最小化版本 link。提前致谢。

沙盒https://codesandbox.io/s/elated-sea-7328g?file=/src/App.js

import "./styles.css";
import {useState} from "react";
export default function App() {

  const [inputValue, setInputValue] = useState("");
  const [inputUsdValue, setinputUsdValue] = useState("");

  const currencyFunction = (formatData) => { 
    return  new Intl.NumberFormat('it-IT').format(formatData)
}

const currencyFunctionDolar = (formatData) => { 
  return  new Intl.NumberFormat('en-US').format(formatData)
}
  return (
    <div className="App" style={{display: "flex", flexFlow: "column"}}>
      <h1>Test component</h1>

      <p>Euro format</p>
      <p>Euro format example {currencyFunction(123456789)}</p>
      <input 
        value={currencyFunction(inputValue)}
        onChange={e => {
                  setInputValue(e.target.value.replace(/,/g, '.').replace(/([a-zA-Z ])/g, ""))
        }} 

        style={{marginBottom: 20}}
    />
    <p>Usd format</p>
    <p>Usd format example {currencyFunctionDolar(123456789)}</p>
    <input 
        value={currencyFunctionDolar(inputUsdValue)}
        onChange={e => {
                  setinputUsdValue(e.target.value.replace(/,/g, '').replace(/([a-zA-Z ])/g, "").replace(/^0+/, ''))
        }} 
    />
    </div>
  );
}

Answer 1

对于欧元货币的 onChange 事件，您希望像删除美元的 , 一样删除 .，您可以通过以下方式实现关注：

setInputValue(e.target.value.replace(/[.]/g, '').replace(/([a-zA-Z ])/g, "").replace(/^0+/, ''))

之所以将.括在方括号中([])是因为它是正则表达式中的特殊字符。

工作沙箱示例：https://codesandbox.io/s/ecstatic-wilson-or7qd?file=/src/App.js

欧元货币格式

Currency format in euro

javascript

currency

reactjs