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
    评论
专栏目录
digitinputs-react:数字输入的React组件
05-27
digitinputs-react 数字输入的React组件。 在两因素身份验证中以及从许多其他情况下，需要从用户中逐位获取数字输入时，从用户获取SMS代码可能非常有用。 访问以查看示例。 安装 npm install --save digitinputs-react 用法 将具有单个参数的函数传递给onDigitsChange道具以获取值。 数字长度取决于作为子代传递的Digit 。 您可以使用hidden切换道具在text和password输入之间切换。 import React , { Component } from 'react' import { DigitInputs , Digit } from 'digitinputs-react' import 'digitinputs-react/dist/index.css' class Example extends Co
基于React.js实现原生js拖拽效果引发的思考
11-23
在本文中，我们将探讨如何利用React.js来实现原生JavaScript的拖拽效果，并结合实际的开发工具和组件构建，深入理解这一过程中的关键知识点。React.js是一个流行的JavaScript库，用于构建用户界面，尤其是单页应用。...
React中限制输入框仅输入数字或手机号 密码验证
weixin_42262889的博客
09-21 2037
https://blog.csdn.net/qq_26377547/article/details/97259641 https://ant.design/components/form-cn/ http://caibaojian.com/regexp-example.html 密码验证
input只允许输入数字
最新发布
weixin_52597660的博客
06-07 260
【代码】input只允许输入数字。
React中获取input框的输入值
congboer的博客
07-13 1628
React中获取input框的输入值 import React,{Component,Fragment} from 'react' class Shijian extends Component{ constructor(){// super() this.state={ flag:true, msg:'' ...
js:使用输入框接收数值并计算
yiXin_Chen的博客
01-13 1429
<!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[type='number']
weixin_34068198的博客
05-16 1157
最近在写业务的时候遇到一个坑，当用户在 input[type='number'] 中输入 “01” 时，我将值设置为 1 ，但它不起作用，它仍显示 “01”。 示例代码如下： function App() { const [state, setState] = useState(0); return ( <div className="App"> <i...
【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来创建一个具有实时搜索功能的组件。 首先，我们需要...
meme-generator-react-js-apps:React.js应用程序（目标
04-23
总结，"meme-generator-react-js-apps"项目展示了React.js、Axios和JavaScript在构建交互式Web应用中的应用，提供了一个从数据获取到用户交互的完整流程。通过学习和分析这个项目，开发者可以提升对React生态系统的...
React.js搜索框文字筛选实例.zip
10-08
React.js是Facebook推出的一个用于构建用户界面的JavaScript库，尤其适合构建单页面应用。它以其组件化、虚拟DOM和高效的更新机制而闻名，使得开发复杂的前端应用变得更为简单。 首先，让我们深入了解一下React组件...
react-currency-input：用于输入货币金额的React组件
02-05
React货币输入 ES2015货币React组件。 支持自定义的十进制和千位分隔符以及...npm install react-currency-input --save 积分 您可以在状态下存储传递给变更处理程序的值。 import React from 'react' import Curren
BookSearch:React.js搜索应用
05-08
React.js，作为Facebook推出的JavaScript库，已经成为现代Web开发中最受欢迎的前端框架之一。它的核心理念是组件化，通过将UI拆分成可重用的独立组件，使得代码更加模块化，易于维护。在这个“BookSearch”项目中，...
simple-calculator-using-react:使用React.js计算四个数学运算
05-01
- React组件：React应用的核心是组件，它们是可重用的代码块，可以像JavaScript函数一样接受输入（props）并返回React元素，描述应该在屏幕上看到什么。 - JSX：JSX是React引入的一种语法糖，它允许我们在...
single-character-input-boxes:React单个字符输入框
05-02
动机来自苹果公司类似的用于两要素授权的输入框：演示版您可以查看此组件的演示安装$ npm i --save react-individual-character-input-boxes 如何使用进口： import RICIBs from 'react-individual-character-input...
React 获取Input值
林中明月间丶
11-30 1402
react监听input框里的值 https://www.jianshu.com/p/d87bf644f9ff /** * @name Home * @desc 首页 */ import React, { Component } from "react"; import "./Index.css"; //引入页面css class Home extends Component { constructor(props) { super(props); //react定义数据
React+JS--input框绑定值
m0_62330492的博客
03-24 327
2.类组件方式---ref。
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、付费专栏及课程。

余额充值