ant-design-react form-item 表单纯数字输入框

1.组件封装

import React from 'react'
import { Input } from 'antd'

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

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

  const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    let newNumber = parseInt(e.target.value || '0', 10)
    if (Number.isNaN(number)) {
      newNumber = 0
    }
    if (max) {
      newNumber = newNumber > max ? max : newNumber
    }
    setNumber(newNumber)
    triggerChange(newNumber)
  }

  return <Input className={className} onChange={onNumberChange} type="text" value={value} />
}

export default inputNumber

2.组件使用

     <Form.Item name="clockInStartTime" rules={[{ required: true, message: '' }, () => ({ validator })]} >
        <InputNumber className="!w-80px !mx-10px" max={240} placeholder="" />
     </Form.Item>