#私藏项目实操分享#【React工作记录八】如何限制ant design的input只能输入数字

简介: #私藏项目实操分享#【React工作记录八】如何限制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' },
        },

问题解决


相关文章
|
2月前
|
存储 前端开发 JavaScript
React 表单输入组件 Input:常见问题、易错点及解决方案
本文介绍了在 React 中使用表单输入组件 `Input` 的基础概念,包括受控组件与非受控组件的区别及其优势。通过具体代码案例,详细探讨了创建受控组件、处理多个输入字段、输入验证和格式化的方法,并指出了常见易错点及避免方法,旨在提升表单的健壮性和用户体验。
68 4
|
5月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
198 1
React项目input输入框输入自动失去焦点
|
5月前
|
前端开发
react动态生成input、select标签以及思路总结
本文介绍了在React中动态生成input和select标签的方法,包括准备数据结构、在组件挂载时动态添加状态、页面渲染以及输入处理,最后总结了实现思路。
64 1
react动态生成input、select标签以及思路总结
|
5月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
7月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
213 1
|
9月前
|
JavaScript 前端开发 开发者
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
深入比较Input、Change和Blur事件:Vue与React中的行为差异解析
|
9月前
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
246 0
|
9月前
|
前端开发
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
9月前
|
前端开发 JavaScript Linux
[React] 实现点击Button将文件名赋值Input
[React] 实现点击Button将文件名赋值Input
|
9月前
|
前端开发
react获取input的value值
react获取input的value值
151 0