ant-design-react 框架form-item中封装表单组件

142 阅读1分钟

1.只能输入数字,并保留2位小数

import React from 'react'
import { Input } from 'antd'
import { changeAbs } from '@/lib/utils'

const inputNumber: React.FC<any> = props => {
  const { value = 0, onChange, className, max, double, onBlur } = props
  const [number, setNumber] = useState<any>('')

  const triggerChange = (number?: any) => {
    onChange?.(number)
  }

  const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNumber(e.target.value)
    triggerChange(e.target.value)
  }
  
  const funBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
    let num: any = changeAbs(e.target.value)
    setNumber(num)
    triggerChange(num)
    onBlur?.(num)
  }
  
    function changeAbs(val: any, len = 2) {
      if (!val || isNaN(Number(val))) {
        return 0
      }
      return Math.abs(-Number(val).toFixed(len))
    }

  return (
    <Input
      className={className}
      onBlur={funBlur}
      onChange={onNumberChange}
      type="text"
      value={value}
    />
  )
}

export default inputNumber