我正在開發一個組件，該組件將值格式化為以不同的格式呈現，例如帶有逗號和點的美元和歐元。我有一個可用的美元輸入但是我的歐元輸入不起作用并且輸入沒有得到我輸入的正確值，我嘗試了不同的解決方案但無法找出丟失的部分。這是組件和沙箱鏈接的最小化版本。提前致謝。
沙盒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>
);
}
uj5u.com熱心網友回復：
對于您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
uj5u.com熱心網友回復：
Intl.NumberFormat不僅需要語言環境，還需要定義樣式和貨幣的選項物件（有關更多資訊，請參閱檔案）。在你的情況下，你可能想要這樣的東西來代替意大利的歐元：
const currencyFunction = (formatData) => {
return new Intl.NumberFormat('it-IT', {
style: 'currency',
currency: 'EUR',
}).format(formatData)
}
currencyFunction(123456789) // Will output '123.456.789,00 €'
對于美國的美元：
const currencyFunctionDollar = (formatData) => {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(formatData)
}
currencyFunctionDollar(123456789) // Will output '$123,456,789.00'
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/330760.html
標籤：javascript 反应 货币