Hello Devs,
In this tutorial, we will learn React - How to Allow Only Numbers in Textbox?
In this section, example of allow only number in input text field in react js. we will write that code on change event. we take one number text field and you can only enter number in that textbox.
Follow this step by step guide below.
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 - rathorji.in</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'));
Run below command:
npm start
Open below URL:
http://localhost:3000
May this example help you.