【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' },

},

问题解决

————————————————

版权声明:本文为CSDN博主「前端大歌谣」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/geyaoisnice/article/details/121969802

© 著作权归作者所有,转载或内容合作请联系作者

推荐阅读 更多精彩内容

  • 问:Table组件默认只有选中当前页的全选状态,也就是说,如果后端一下子返回前端21条数据,每页20条数据,数据就...
    刘叶青 阅读 398 评论 0 0
  • 1.oninput =“value=value.replace(/[^\d]/g,’’)” //只能输入数字2.o...
    土豆他爹_ca4b 阅读 2,174 评论 0 0
  • 方便起见不分parameter[形参,出现在函数定义中]和argument[实参,其值为传入函数的值],一律当作a...
    东月三二 阅读 268 评论 0 0
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外 阅读 4,796 评论 0 29
  • 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScrip...
    王蕾_fd49 阅读 333 评论 0 0