如何限制ant design的input只能输入数字

简介: 如何限制ant design的input只能输入数字

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语

今天在找到我 这边我们有一个bug需要处理一下 就是输入框里面不可以输入数字 只能输入文字


<Form.Item label={item.label || ''} {...formItemLayout}> {getFieldDecorator(`${item.paramsName}`, { getValueFromEvent: (event) => { if (item.inputType === 'number' || item.inputType !== undefined) { return event.target.value.replace(/\D/g, ''); } else { return event.target.value; } }, })(<Input placeholder="请输入" {...item.otherProps} />)} </Form.Item>




运行结果

如上限制代码 则控制成功


后续

直接父子传值给了一个otherProps的属性


{ type: 'input', label: '客户ID', paramsName: 'customerId', otherProps: { type: 'number' }, },




问题解决


相关文章
|
前端开发
修改Ant Design 按钮的样式
修改Ant Design 按钮的样式
1673 0
|
存储 大数据 API
大数据隐私保护策略:加密、脱敏与访问控制实践
【4月更文挑战第9天】本文探讨了大数据隐私保护的三大策略:数据加密、数据脱敏和访问控制。数据加密通过加密技术保护静态和传输中的数据,密钥管理确保密钥安全;数据脱敏通过替换、遮蔽和泛化方法降低敏感信息的敏感度;访问控制则通过用户身份验证和权限设置限制数据访问。示例代码展示了数据库、文件系统和API访问控制的实施方式,强调了在实际应用中需结合业务场景和平台特性定制部署。
4661 0
|
8月前
|
人工智能 程序员 图形学
第一章 AI 编程革命的第一步:让 Cursor 真正“听懂”你要做一款游戏
第一章 AI 编程革命的第一步:让 Cursor 真正“听懂”你要做一款游戏
661 5
第一章 AI 编程革命的第一步:让 Cursor 真正“听懂”你要做一款游戏
|
前端开发 JavaScript UED
React 图标库使用指南
本文详细介绍如何在 React 项目中使用 `react-icons` 等图标库,涵盖环境搭建、基础使用、常见问题与易错点、高级用法等内容,并通过代码案例进行说明。适合初学者和进阶开发者参考。
1384 8
|
JavaScript
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
722 1
|
JavaScript
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
870 7
|
JavaScript 前端开发
【JS】获取当前时间,且格式为yyyy-MM-dd hh:mm:ss
【JS】获取当前时间,且格式为yyyy-MM-dd hh:mm:ss
647 0
|
传感器 编解码 vr&ar
Intel深度摄像头RealSense D435(实感双目摄像头)和目标检测结合使用
Intel深度摄像头RealSense D435(实感双目摄像头)和目标检测结合使用
7745 0
Antd——如何自定义月的选择范围
Antd——如何自定义月的选择范围
436 0

热门文章

最新文章