Allow only Numbers in Input Field React JS Example

I will explain step by step tutorial react allow only numbers in input. you'll learn react input field allow only numbers. This post will give you simple example of allow only numbers in textbox react js. you can understand a concept of allow only numbers in input field react.

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 - HDTuto.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...