我正在使用MUI和Formik創建表單。我需要更改所有輸入中的數字格式：
1000.00 -> 1.000,00
一個創建的函式formatNumber(num)來做到這一點，它的作業原理。但問題是它回傳字串和我的 API 等待號（我對此無能為力）。我嘗試使用react-number-format但它也回傳字串。
所以我還做了函式parseNumber(str)來決議從字串到數字的格式化數字。現在我需要在表單提交之前使用此功能，我不知道如何正確執行此操作。目的是用戶應該始終在輸入中看到格式化的資料。但是在表單提交之后，這個資料應該作為一個數字發送到服務器。
這是我的代碼：
//"12345678.09" to "12.345.678,09"
export const formatNumber = (num: number | null): string => {
const formatNum = num
? new Intl.NumberFormat()
.format(num)
.replaceAll(",", "_")
.replaceAll(".", ",")
.replaceAll("_", ".")
: "";
return formatNum;
};
// "12.345.678,09" back to "12345678.09"
export const parseNumber = (str: string | null): number | null => {
if (str !== null) {
str = str.trim();
let result = str.replace(/[^0-9]/g, "");
if (/[,.]\d{2}$/.test(str)) {
result = result.replace(/(\d{2})$/, ".$1");
}
return parseFloat(result);
} else {
return null;
}
};
<Formik
initialValues={initialValues}
onSubmit={onSubmit}
>
<Form noValidate onSubmit={handleSubmit}>
<TextField
name=“some_value”
type="string"
value={formatNumber(values.some_value)}// here I format data that I get from server, the user should change it in the field and send back to server
/>
</Form>
<Formik>
uj5u.com熱心網友回復：
您可以在將 handleSubmit 函式中的值傳遞給 api 之前對其進行轉換。
const handleSubmit = (values) => {
values.some_value = parseNumber(values.some_value);
fetch(apiUrl, { body: values })
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475665.html
標籤：javascript 反应 材料-ui 形式