更改数字格式并将其作为数字获取

Question

我正在使用 MUI 和 Formik 创建表单。我需要更改所有输入中的数字格式：

1000.00 -> 1.000,00

创建函数 formatNumber(num) 来执行此操作，它有效。但问题是它 returns 字符串和我的 API 等待号码（我对此无能为力）。我尝试使用 react-number-format 但它也 returns string.

所以我还创建了函数 parseNumber(str) 来将格式化后的数字从字符串解析为数字。现在我需要在 before 表单提交之前使用这个函数，我不知道如何正确地做到这一点。目的是用户应该始终在输入中看到格式化数据。但是在表单提交之后，这个数据应该作为一个数字发送到服务器。

这是我的代码：

//"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})$/, ".");
    }
    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>

Answer 1

您可以在 handleSubmit 函数中转换值，然后再将其传递给 api。

const handleSubmit = (values) => {
    values.some_value = parseNumber(values.some_value);
    fetch(apiUrl, { body: values })
};

更改数字格式并将其作为数字获取

Change number format and get it as a number

javascript

reactjs

material-ui

formik