antd InputNuber 只能输入数字功能怎么实现
时间: 2024-04-08 09:30:13 浏览: 41
要实现 Ant Design 中的 InputNumber 只能输入数字的功能,可以使用以下方法:
1. 使用正则表达式限制输入:在 InputNumber 组件的 onChange 事件中,获取输入的值,并使用正则表达式验证是否为数字。如果不是数字,则清空输入框或者给出错误提示。
```jsx
import { InputNumber } from 'antd';
function onChange(value) {
// 使用正则表达式验证是否为数字
const reg = /^-?\d*(\.\d*)?$/;
if (!reg.test(value)) {
// 非数字,清空输入框或者给出错误提示
// 示例:使用错误提示
console.log('请输入数字');
}
}
function App() {
return (
<InputNumber onChange={onChange} />
);
}
```
2. 使用 min 和 max 属性限制范围:通过设置 InputNumber 组件的 min 和 max 属性,可以限制输入的数字范围。如果需要仅允许输入整数,可以设置 step 属性为 1。
```jsx
import { InputNumber } from 'antd';
function App() {
return (
<InputNumber min={0} max={100} step={1} />
);
}
```
以上两种方法可以结合使用,以达到只能输入数字的功能,并且可以限制输入的范围。
阅读全文