antd输入框只能输入数字小数
时间: 2024-03-02 15:45:57 浏览: 113
只能输入数字(包括小数)的编辑框
5星 · 资源好评率100%
以下是一个示例,演示了如何使用antd的Input组件实现只能输入数字和小数的功能:
```jsx
import React from 'react';
import { Form, Input } from 'antd';
const DemoForm = () => {
const handleInputChange = (e) => {
const { value } = e.target;
const tempArr = value.split('.');
if (tempArr[1]?.length) {
e.target.value = `${tempArr[0]}.${tempArr[1].slice(0, 2)}`.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g, '');
} else {
e.target.value = value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g, '');
}
};
return (
<Form>
<Form.Item
name="goodsPurchasePrice"
label="指标值"
getValueFromEvent={handleInputChange}
>
<Input placeholder="请输入" />
</Form.Item>
</Form>
);
};
export default DemoForm;
```
在上述示例中,我们使用了antd的Form和Input组件。在Form.Item组件中,我们通过设置getValueFromEvent属性来处理输入框的值变化。在handleInputChange函数中,我们根据输入框的值进行处理,只保留数字和小数点,并限制小数位数为两位。最后,将处理后的值重新赋给输入框。
阅读全文