如何防止在 Form.Item ant 的 InputNumber 中输入超出范围的非数字符号和数字

【问题标题】：How to prevent entering non numeric symbols and numbers out of range in InputNumber in Form.Item ant如何防止在 Form.Item ant 的 InputNumber 中输入超出范围的非数字符号和数字
【发布时间】：2022-08-14 02:59:16
【问题描述】：

我试图通过受控输入在onChange 中处理它。

尝试在formatter 和parser 中处理它，但无效值不会触发它，尽管符号输入输入。

尝试通过useForm 钩子提供的setFieldsValue 方法在此输入中设置值。

试图设置type=\"number\"

当InputNumber 在Form.Item 中时，这些都不起作用。 Link to Sandbox

请帮忙。我该如何解决？

标签： reactjs antd

【解决方案1】：

检查以下示例。

以下代码将允许用户仅输入数字

应用程序.js

import React from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { InputNumber, Form } from 'antd';

const App = () => {
  return (
    <Form>
      <Form.Item name="input-with-type">
        <InputNumber
          type="number"
          min={0}
          max={9999.99}
          onKeyDown={(event) => {
            const re = /^[0-9\b]+$/;
            if (!re.test(event.key) && event.key !== 'Backspace') {
              event.preventDefault();
            }
          }}
        />
      </Form.Item>
    </Form>
  );
};

export default App;

笔记：您可以根据您的要求更改正则表达式

【讨论】：