React - How to Allow Only Numbers in Textbox?

By Hardik Savani | June 1, 2020 | Category : React JS

Today, i will let you know example of allow only numbers in textbox react js. This article will give you simple example of allow only numbers in input field react. i explained simply about only numbers allowed in textbox reactjs. This tutorial will give you simple example of react allow only numbers in input.

In this example, i will show you simple example of allow only number in input text field in react js. we will write that code on change event. i take one number text field and you can only enter number in that textbox.

So, let see bellow example code for enter only number in textbox react js.

Example Code:

import React, { Component } from 'react';

import { render } from 'react-dom';

class App extends Component {

constructor() {


this.state = {

number: ''


this.handleChange = this.handleChange.bind(this);

this.handleSubmit = this.handleSubmit.bind(this);


handleChange(event) {

const re = /^[0-9\b]+$/;

if ( === '' || re.test( {




handleSubmit(event) {




render() {

return (


<h1>How to Allow Only Numbers in Textbox in React -</h1>

<form onSubmit={this.handleSubmit}>




onChange={this.handleChange} />

<input type="submit" value="Submit" />






render(, document.getElementById('root'));

Now we are ready to run our application, so let's run using bellow command:

npm start

Open bellow url:


I hope it can help you...

Tags : React JS

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: