React - How To Allow Only Numbers In Textbox?

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