antd InputNumner限制输入’-‘号

前言：当我们在使用react + antd design的InputNumber时发现这个组件可以输入正号和负号，在一些需求中不希望出现负号，该如何处理，下面列出一些常见的解决思路。

1. 通过Form的rule正则表达式校验负号，当键入负号时加以提示。
   解析：

<Form form={form}>
  <Item name='abc' label='测试' rules={[{ pattern: /-/g, message: '不能输入负号' }]}>
    <Input />
  </Item>
</Form>

2. 当用户键入负号时使用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将负号置为空。

3. 阻止键入
   解析：当输入负号时阻止键入

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;

这样当我们键入-号时会发现输入框里面始终不会出现该负号。