javascript - 我有一个数字输入，我想转换成十进制反应 js

Question

我想将输入类型数字转换为表单值中的两个十进制值，但在没有小数时仅向用户显示整数。例如 1 -> 1.00 , 2.346 -> 2.34 与第一个示例一样，它应该只向用户显示 1 但在表单值中它应该是 1.00

<Input
  {...field}
  onKeyDown={e => decimalPlace(e, form)}
  type="number"
  step={0.01}
  value={minVal}
  onChange={e => {
    form.handleChange(e);
  }}
  id="price"
  isDisabled={isSubmitting}
/>

当我使用脉轮和formik时，这里的minVal是我在decimalPlace函数中设置的状态，如下所示

form.setFieldValue('targetPriceMin', Number(e.target.value).toFixed(2))

标签： javascriptreactjs

Answer 1

将值传递给输入时对其进行格式化。

<Input
  {...field}
  onKeyDown={(e) => decimalPlace(e, form)}
  type="number"
  step={0.01}
  value={Number(minVal).toFixed(2)} // <-- format here for display
  onChange={(e) => {
    form.handleChange(e);
  }}
  id="targetPriceMin"
  isDisabled={isSubmitting}
/>

沙盒中的代码使用普通输入，但原理相同。

<input
  type="number"
  min={0}
  max={10}
  step={0.01}
  value={Number(value).toFixed(2)}
  onChange={(e) => setValue(e.target.value)}
/>