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() {

super();

this.state = {

number: ''

};

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

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

}

handleChange(event) {

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

if (event.target.value === '' || re.test(event.target.value)) {

this.setState({number: event.target.value})

}

}

handleSubmit(event) {

console.log(this.state);

event.preventDefault();

}

render() {

return (

<div>

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

<form onSubmit={this.handleSubmit}>

<input

type="text"

value={this.state.number}

onChange={this.handleChange} />

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

</form>

</div>

);

}

}

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

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

npm start

Open bellow url:

http://localhost:3000

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: