2021-07-08

antd如何限制InputNumber只能输入小数和整数

需求背景：需要实现在input框中只能输入整数和小数的功能，如果按键盘上的其他键是无法输入的
思路：首先你要了解antd中InputNumber的formatter、parser这两个API
话不多说上代码！！！

import type { FC } from "react";
import React, { Fragment } from "react";
import { Row, Col, InputNumber } from "antd";
import styles from "../../index.less";

const Demo: FC = () => {
  const decimalCheck = (value: string | number): string => {
    const reg = /^(-)*(\d+)\.(\d\d).*$/; // 小数和整数的正则
    if (typeof value === "string") { // 判断传入的value是不是字符串
      // eslint-disable-next-line no-restricted-globals
      return !isNaN(Number(value)) ? value.replace(reg, "$1$2.$3") : "";
    }
    if (typeof value === "number") { // 判断传入的value是不是数字
      // eslint-disable-next-line no-restricted-globals
      return !isNaN(value) ? String(value).replace(reg, "$1$2.$3") : "";
    }
    return ""; // 如果都不是return空，做一个兜底处理
  };
  return (
    <Fragment>
      <Row>
        <Col span={12} className={styles.commonTitileRight}>
          <InputNumber
            className={styles.InputNumber}
            defaultValue={1}
            // @ts-ignore
            min={0}
            max={1}
            step={0.01}
            // @ts-ignore
            formatter={decimalCheck}
            // @ts-ignore
            parser={decimalCheck}
          />
        </Col>
      </Row>
    </Fragment>
  );
};
export default Demo;

在formatter、parser中使用decimalCheck方法即可实现，效果如下图

如果觉得有用记得一键三连喔～