如何防止在Ant设计库（React js）的数字输入字段中输入字母

Question

我正在尝试设置一个数字输入字段（InputNumber https://ant.design/components/input-number/ ），以便除数字外不输入任何字符和字母。 Ant 设计库（ https://ant.design/ ）中输入的标准行为：输入字母，当您在字段外单击时，所有字母消失，字段保持空白。 我没有找到任何负责输入到输入的行为的内置道具。 请帮我弄清楚，这是我的原始代码：

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>
    );
  }
}

理论上，我只需要在值中不接受除数字以外的任何字符，但由于某种原因，我的选项不起作用。 如果我理解正确，那么我需要写一个数字检查或替换以下函数之一：

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];
  }

尝试了一堆选项，但没有任何效果...... =（

Answer 1

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

我觉得你正面临这个问题https://github.com/ant-design/ant-design/issues/21158