react.js实现input输入框只接受数字

最新推荐文章于 2024-06-07 17:42:25 发布
最新推荐文章于 2024-06-07 17:42:25 发布
阅读量1.8k 收藏 3
点赞数 1
分类专栏： JavaScript 文章标签： javascript react reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44745920/article/details/109699681
版权

 

changeEvent=(e)=>{
    let value = e.target.value.replace(/[^\d]/, '')
    this.setState({ checkCode: value })
}

 <input value={this.state.checkCode} onChange={(e) => this.changeEvent(e)></input>

解析：[^\d]表示所有除了数字以外的字符，/g表示全局匹配，.replace(/[^\d.]/g,"")表示将数字以外的字符替换为空

 

何曼联
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于React.js实现原生js拖拽效果引发的思考
11-23
在本文中，我们将探讨如何利用React.js来实现原生JavaScript的拖拽效果，并结合实际的开发工具和组件构建，深入理解这一过程中的关键知识点。React.js是一个流行的JavaScript库，用于构建用户界面，尤其是单页应用。...
react Input只能输入正整数
weixin_44510655的博客
04-26 1419
只能输入正整数 javascript
2022-07-25 工作记录--React/JS-input输入框 / textarea文本框输入字数限制以及字数显示
weixin_48850734的博客
07-25 4104
React/JS-textarea文本框输入字数限制以及字数显示
input只允许输入数字
最新发布
weixin_52597660的博客
06-07 257
【代码】input只允许输入数字。
react input 只能输入数字
qq_44170622的博客
09-27 2028
changeEvent=(e)=>{ let value = e.target.value.replace(/[^\d]/, '') this.setState({ checkCode: value }) } <input value={this.state.checkCode} onChange={(e) => this.changeEvent(e)></input> 解析：[\d]表示所有除了数字以外的字符，/g表示全局匹配，.replace(
react antd InputNumber只允许输入数字的方法
BHSZZY的博客
09-28 2962
前端项目是react，使用了antd，需要一个数字输入框，只允许输入数字。
React+JS--input框绑定值
m0_62330492的博客
03-24 325
2.类组件方式---ref。
【JavaScript源代码】react+antd.3x实现ip输入框.docx
12-29
在React和Ant Design 3.x框架下，实现一个IP输入框功能涉及到多个关键知识点，包括组件化开发、React状态管理、事件处理以及Ant Design的使用。以下是对这些知识点的详细说明： 1. **React组件**： - `IpInput`是...
react.js 获取真实的DOM节点实例(必看)
11-26
首先，React.js是Facebook推出的一个用于构建用户界面的JavaScript库，它采用组件化开发模式，通过虚拟DOM（Virtual DOM）提高应用性能。虚拟DOM允许React高效地比较和更新UI，而避免直接操作DOM，从而减少了浏览器...
React.js搜索框文字筛选实例
07-24
React.js是一个由Facebook维护的JavaScript库，用于构建用户界面，尤其适合构建单页面应用。在这个"React.js搜索框文字筛选实例"中，我们将探讨如何利用React来创建一个具有实时搜索功能的组件。 首先，我们需要...
js:使用输入框接收数值并计算
yiXin_Chen的博客
01-13 1427
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.使用输入框接收数值并计算</title> </head> <body> </body> <script> var num1=prompt("请输入第一个数"); var num2=prompt("请输入第二个数".
react里实现input输入框只能输入大于0的正整数
freedms的博客
05-08 696
react里实现input输入框只能输入大于0的正整数
React Antd 中怎么设置表单只输入数字
weixin_50923989的博客
07-03 3416
React用antd的Form组件提交信息的时候有时候需要限制只能填数字，笔者在CSDN上看到的文章都属于比较老的版本，不能解决我的问题，在我知道怎么解决之后作此文以供参考。
【React工作记录八】如何限制ant design的input只能输入数字
geyaoisnice的博客
12-16 2372
前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 今天在找到我 这边我们有一个bug需要处理一下 就是输入框里面不可以输入数字 只能输入文字 <Form.Item label={item.label || ''} {...formItemLayout}> {get
Do not access Object.prototype method ‘hasOwnProperty‘ from target object
哈哈hyc的博客
08-13 605
今天用对象的属性hasOwnProperty，去判断对象是否包含该值，我这里主要判断对象是否为空，出现了以上错误，之前也遇到过类似的错误，如parseInt（‘24.5’），必须要给转换的进制类型，改为parseInt（‘24.5’，10）则正常 通过上述文字提示发现，不要从目标对象访问 Object 原型方法”，想到一种解决方案——直接找到这个方法，用 call 改变指向调用： Object.prototype.hasOwnProperty.call(obj, 'key') 在ECMAScript.
JavaScript： 在页面中接收一个用户输入的数字，并判断该数是否是质数
weixin_44835897的博客
04-11 1847
在页面中接收一个用户输入的数字，并判断该数是否是质数。 质数：只能被1和它自身整除的数，1不是质数也不是合数，质数必须是大于1的自然数。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
用js控制输入框input数字、汉字、字符与正则表达式
懒虫的博客
08-04 1183
验证数字的正则表达式集 ： 验证数字：1$ 验证n位的数字：^\d{n}$ 验证至少n位数字：^\d{n,}$ 验证m-n位的数字：^\d{m,n}$ 验证零和非零开头的数字：^(0|[1-9][0-9])$ 验证有两位小数的正实数：2+(.[0-9]{2})?$ 验证有1-3位小数的正实数：3+(.[0-9]{1,3})?$ 验证非零的正整数：^+?[1-9][0-9]$ 验证非零的负整数：^-[1-9][0-9]$ 验证非负整数（正整数 + 0） ^\d+$ 验证非正整数（负整数 + 0） ^((-\d
「前端」React中限制输入框仅输入数字或手机号
热门推荐
Jack's Blog
07-25 1万+
很久没有写博客了，最近在自己做项目的过程中遇到了一些坑，踩完之后怕自己忘了，写下来记录一下。 在React中，我们在修改输入框的内容是会调用到onChange函数，然后通过onChange函数实现修改state的功能，在这个过程中如何实现对输入内容的限制呢？ 例如在登录的时候，对手机号和验证码的输入做限制： 解决办法1： 直接使用antd中的Form组件，使用getFieldDecorator方...
React input框数值绑定
qq_36249659的博客
02-12 993
1 import React from 'react' export default class BindEvent extends React.Component{ constructor(){ super() this.state={ msg:'dog' } } render(){ ...
react Input.TextArea
07-27
React Input.TextArea 是 React 的一个组件，用于创建多行文本输入框。它是 React 的表单元素之一，可以用于收集用户的输入信息。 在使用 React Input.TextArea 组件之前，你需要确保已经安装了 React 和 React-DOM 库。然后，可以按照以下步骤来使用它： 1. 导入所需的库和组件： ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import { Input } from 'antd'; ``` 2. 在组件中使用 Input.TextArea： ```javascript class MyComponent extends React.Component { constructor(props) { super(props); this.state = { textareaValue: '' }; } handleTextareaChange = (e) => { this.setState({ textareaValue: e.target.value }); } render() { return ( <div> <Input.TextArea value={this.state.textareaValue} onChange={this.handleTextareaChange} /> </div> ); } } ReactDOM.render(<MyComponent />, document.getElementById('root')); ``` 上述代码中，我们创建了一个名为 MyComponent 的 React 组件，其中包含一个 Input.TextArea。通过设置 value 属性和 onChange 事件处理函数，我们可以获取用户输入的文本并更新组件的状态。在这个例子中，我们将用户输入的文本保存在组件的状态中。 注意：上述代码只是一个例子，你可以根据自己的实际需求进行修改和扩展。 希望这个回答对你有帮助！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值