代码

import React from "react"
import { Input } from "../ui"

interface InputNumberProps extends React.InputHTMLAttributes<HTMLInputElement> {
  precision?: number // 小数位数限制
}

export const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
  ({ className, precision = 2, onChange, ...props }, ref) => {
    // 处理输入变化
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const value = e.target.value
      // 正则表达式：允许正负号、小数点和数字，且小数位数受限于 precision
      const regex = new RegExp(`^-?\\d*(\\.\\d{0,${precision}})?$`)
      if (regex.test(value) || value === "") {
        onChange?.(e) // 调用传入的 onChange 事件
      }
    }

    return (
      <Input
        id="number-input"
        inputMode="numeric"
        className={className}
        ref={ref}
        onChange={handleChange}
        {...props}
      />
    )
  }
)

实际使用

<InputNumber
{...field}
disabled={fieldInit.payee_amount?.disabled}
onBlur={() => {
  const value = formatToTwoDecimals(field.value || "")
  if (value) {
    form.setValue("payee_amount", value)
  }
  field.onBlur()
 }}
/>

export function formatToTwoDecimals(str: string) {
  const num = parseFloat(str)

  if (isNaN(num)) {
    return ""
  }

  return num.toFixed(2).toString()
}

效果