How to prevent letters from being entered in a numeric input field in Ant Design library (React js)

Question

I'm trying to set up a numeric input field (InputNumber https://ant.design/components/input-number/) so that no characters and letters are entered into it, except for numbers. The standard behavior of the input in the Ant Design library (https://ant.design/): letters are entered, and when you click outside the field, all letters disappear and the field remains empty. I did not find any built-in props responsible for the behavior of the input to the input. Please help me figure it out, here is my original code:

import React from "react";
import { observer } from "mobx-react";
import { NumberInput } from "components/uui/NumberInput/NumberInput";
import { BaseModel } from "models/BaseModel";
import classNames from "classnames";
import styles from "components/fields/styles.less";

interface Props {
  name: string;
  model: BaseModel;
  onChange?: (value: number) => void;
  autoFocus?: boolean;
  size?: "large" | "small";
  min?: number;
  className?: string;
  noLabel?: boolean;
  labelColor?: string;
  max?: number;
}

@observer
export class NumberField extends React.Component<Props> {
  static defaultProps = {
    min: 5,
    autoFocus: true,
    labelColor: "darkGray"
  };

  private handleInput = (value: number): void => {
    const { model, name, onChange } = this.props;
    model.setAttribute(name, value);

    if (onChange) {
      onChange(value);
    }
  };

  get value(): number {
    const { model, name } = this.props;

    // @ts-ignore
    // TODO: make it generic
    return model[name];
  }

  render(): React.ReactChild {
    const { className, model, noLabel, name, labelColor, ...rest } = this.props;

    return (
      <div className={classNames(styles.formField, className)}>
        {!noLabel && (
          <label className={styles[labelColor]}>{model.getLabel(name)}</label>
        )}
        <NumberInput value={this.value} onChange={this.handleInput} {...rest} />
      </div>
    );
  }
}

In theory, I just need not to accept any characters other than numbers in the value, but for some reason my options do not work. If I understand correctly, then I need to write a check for a number or replace in one of these functions:

private handleInput = (value: number): void => {
    const { model, name, onChange } = this.props;        
    model.setAttribute(name, value);

    if (onChange) {
      onChange(value);
    }
  };

  get value(): number {
    const { model, name } = this.props;

    // @ts-ignore
    // TODO: make it generic
    return model[name];
  }

Tried a bunch of options and nothing works ... = (

Answer 1

<InputNumber type="number" value={this.value} onChange={this.handleInput} {...rest} />

I feel you are facing this issue https://github.com/ant-design/ant-design/issues/21158