基于antd Input组件封装最小值和最大值输入，只能输入自然数
1、NumericInput.tsx
import React from 'react'
import { Input } from 'antd'
interface ParamsType {value?: string // 值都是string类型，判断大小时要注意先转为数字再进行判断onChange: (value: string) => voidonBlur?: (value: string) => voidplaceholder?: string // 默认值：请输入数字maxLength?: number // 默认值：5type?: string // 类型，默认值：number
}
const NumericInput: React.FC = (props: any) => {const { value, onChange, onBlur, type = 'number', ...restProps } = propslet reg: RegExpswitch (type) {case 'naturalNumber': // 自然数：0 1 2 3 ...reg = /^\d+?$/breakcase 'nonnegative': // 非负数（零、正数、小数）：0 0.1 1 1.5 2 ...reg = /^\d*(\.\d*)?$/breakcase 'money': // 大于0的数字，小数位为2位reg = /^\s*(?=.*[1-9])\d*(?:\.\d{1,2})?\s*$/breakcase 'number': // 数字（负数、零、正数、小数）：-1.2 -1 0 1 2 3.5 ...reg = /^-?\d*(\.\d*)?$/break}const handleChange = (e: any) => {const { value } = e.targetif ((!Number.isNaN(value) && reg.test(value)) ||value === '' ||((reg + '').includes('-') && value === '-')) {onChange(value)}}const handleBlur = () => {let valueTemp = valueif (value.charAt(value.length - 1) === '.' || value === '-') {valueTemp = value.slice(0, -1)}onChange(valueTemp.replace(/0*(\d+)/, '$1'))onBlur && onBlur(value)}NumericInput.defaultProps = { placeholder: '请输入数字', maxLength: 5 }return ()
}
export default NumericInput
2、Counts/index.tsx
import React, { useState, useEffect } from 'react'
import NumericInput from '../NumericInput'
import './index.less'
interface ParamsType {onChange: (val: string) => void
}
const Counts: React.FC = (props: any) => {const { onChange } = propsconst [minValue, setMinValue] = useState('') // 最小值const [maxValue, setMaxValue] = useState('') // 最大值const [errorText, setErrorText] = useState('') // 错误提示文案useEffect(() => {onChange([minValue, maxValue])}, [minValue, maxValue])return ( {setErrorText(maxValue && +val > +maxValue ? '最小值不能大于最大值' : '')setMinValue(val)}}placeholder="最小值"type="naturalNumber"/> {setErrorText(minValue && val && +val < +minValue ? '最大值不能小于最小值' : '')setMaxValue(val)}}placeholder="最大值"type="naturalNumber"/> {errorText})
}
export default Counts
Counts/index.less
点击查看详细内容```
.count {> div {position: absolute;top: 0;z-index: 1;display: flex;align-items: center;justify-content: space-between;background-color: var(–theme-pro-table-bk);> .ant-input-affix-wrapper, // 具有allowClear属性时> .ant-input { // 不具有allowClear属性时width: calc(50% - 20px);}> i {display: inline-block;width: 15px;height: 1px;background-color: #dde6f7;}}> span {position: absolute;top: 0;left: 0;color: #ff4d4f;transition: top 0.2s;&.errorText {top: 32px;}}
}
3、使用
====
const [beginPersonTotal, setBeginPersonTotal] = useState(‘’) // 最小值const [endPersonTotal, setEndPersonTotal] = useState(‘’) // 最大值// columns：{title: ‘项目人数’,key: ‘count’,hideInTable: true,renderFormItem: () => (
4、正则解释
======
1、大于0的数字，小数位为2位：`/^\s*(?=.*[1-9])\d*(?:\.\d{1,2})?\s*$/`
^# Start of string\s*# Optional whitespace(?=.[1-9])# Assert that at least one digit > 0 is present in the string\d# integer part (optional)(?:# decimal part:. # dot\d{1,2}# plus one or two decimal digits)? # (optional)\s*# Optional whitespace$# End of string
2、大于0且能包含小数（过滤掉0、00、001、0.0、01.1、01.0等，`'1a'`过滤不掉，工作中不要用这个）：`/^([1-9]\d*(\.\d*[1-9][0-9])?)|(0\.\d*[1-9][0-9])|(0\.\d*[1-9])$/`或`/^([1-9]\d*(\.\d*)?)|(0\.\d*[1-9][0-9])|(0\.\d*[1-9])$/`
/^([1-9]\d*(.\d*[1-9][0-9])?)|(0.\d*[1-9][0-9])|(0.\d*[1-9])KaTeX parse error: Undefined control sequence: \d at position 60: …开头的在后半部分）：匹配1~9\̲d̲* // 表示0-9的任意一个… // 匹配结尾
或”，第三种可能0.\d*[1-9] // 表示以0开头，后面接小数点，小数点后面只有一位不为0的数$ // 匹配结尾