前言：当我们在使用react + antd design的InputNumber时发现这个组件可以输入正号和负号，在一些需求中不希望出现负号，该如何处理，下面列出一些常见的解决思路。
- 通过Form的rule正则表达式校验负号，当键入负号时加以提示。
解析：
<Form form={form}>
<Item name='abc' label='测试' rules={[{ pattern: /-/g, message: '不能输入负号' }]}>
<Input />
</Item>
</Form>
- 当用户键入负号时使用replace直接将其置为空。
解析：当键入正号和负号时Item上面的getValueFromEvent和InputNumber上的属性formatter和parser都不会触发
问题一：当使用Item上面的getValueFromEvent属性时键入+-号时打印的value将会是null
<Form form={form}>
<Item name='abc' label='测试' getValueFromEvent={(e) => {
console.log(e);
}}>
<InputNumber type='number' />
</Item>
</Form>
image.png
问题二：当使用InputNumber上的属性formatter和parser时,打印的value将会是空
<Form form={form}>
<Item name='abc' label='测试'>
<InputNumber formatter={(e) => {
console.log(e)
return `${e}`
}} type='number' />
</Item>
</Form>
image.png
因为在上面这三个时机内都不能够使用replace将负号置为空。
- 阻止键入
解析：当输入负号时阻止键入
import React from 'react';
import { InputNumber } from 'antd';
const InputNumberNoNegative = () => {
const handleKeyDown = (e: any) => {
console.log('handleKeyDown', e);
// 阻止'-'键的默认行为
if (e.key === '-') {
e.preventDefault();
}
// 或者使用keyCode -的keyCode是189
if (e.keyCode === 189) {
e.preventDefault();
}
// 推荐使用e.key判断这样能够明确的看到想干啥
};
return (
<InputNumber
min={0}
onKeyDown={handleKeyDown}
style={{ width: 120 }}
placeholder="请输入数字"
/>
);
};
export default InputNumberNoNegative;
这样当我们键入-号时会发现输入框里面始终不会出现该负号。
