#yyds干货盘点 【React工作记录八】如何限制ant design的input只能输入数字

简介: #yyds干货盘点 【React工作记录八】如何限制ant design的input只能输入数字

导语

今天在找到我 这边我们有一个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' },
        },

问题解决

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