Allow only numbers in Input in React
Tags: react
Published: 2019-12-02 09:03:38

Use value and onChange property of input field to allow only numbers in textbox.
Inside the onChange handle check whether the entered value is valid number or not. Update the state only when entered value is a valid number.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/e43iecm0pyzcvmpq2xak.png)

See the below example to do this.

#Example 1,

You can use Number and conditionally change state.
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">React</span><span style="color: #333333">,</span> {
	Component
} <span style="color: #008800; font-weight: bold">from</span> <span style="background-color: #fff0f0">&#39;react&#39;</span>;

<span style="color: #008800; font-weight: bold">class</span> <span style="color: #BB0066; font-weight: bold">AllowOnlyNumber</span> extends Component {
	constructor(props) {
		<span style="color: #007020">super</span>(props);

		this<span style="color: #333333">.</span>state <span style="color: #333333">=</span> {
			telephone: <span style="background-color: #fff0f0">&#39;&#39;</span>
		};
		this<span style="color: #333333">.</span>onHandleTelephoneChange <span style="color: #333333">=</span> this<span style="color: #333333">.</span>onHandleTelephoneChange<span style="color: #333333">.</span>bind(this);
	}

	onHandleTelephoneChange <span style="color: #333333">=</span> e <span style="color: #333333">=&gt;</span> {
		let telephone <span style="color: #333333">=</span> e<span style="color: #333333">.</span>target<span style="color: #333333">.</span>value;

		<span style="color: #008800; font-weight: bold">if</span> (<span style="color: #FF0000; background-color: #FFAAAA">!</span>Number(telephone)) {
			<span style="color: #008800; font-weight: bold">return</span>;
		}
		this<span style="color: #333333">.</span>setState({
			[e<span style="color: #333333">.</span>target<span style="color: #333333">.</span>name]: telephone
		});
	};

	render() {
		<span style="color: #008800; font-weight: bold">return</span> ( <span style="color: #333333">&lt;</span>
			<span style="color: #333333">&gt;</span>
			<span style="color: #333333">&lt;</span>
			label <span style="color: #333333">&gt;</span> Allow only numbers <span style="color: #000000; font-weight: bold">in</span> Input(React): <span style="color: #333333">&lt;</span> <span style="color: #333333">/</span> label <span style="color: #333333">&gt;</span> <span style="color: #333333">&lt;</span>
			<span style="color: #007020">input</span> <span style="color: #007020">type</span> <span style="color: #333333">=</span> <span style="background-color: #fff0f0">&quot;tel&quot;</span>
			name <span style="color: #333333">=</span> <span style="background-color: #fff0f0">&quot;telephone&quot;</span>
			placeholder <span style="color: #333333">=</span> <span style="background-color: #fff0f0">&quot;Telephone Number&quot;</span>
			value <span style="color: #333333">=</span> {
				this<span style="color: #333333">.</span>state<span style="color: #333333">.</span>telephone
			}
			onChange <span style="color: #333333">=</span> {
				this<span style="color: #333333">.</span>onHandleTelephoneChange
			}
			<span style="color: #333333">/</span> <span style="color: #333333">&gt;</span> <span style="color: #333333">&lt;</span>
			<span style="color: #333333">/&gt;</span>
		);
	}
}
</pre></div>


#Example 2,

You can use regex and conditionally change state.

<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008800; font-weight: bold">import</span> <span style="color: #0e84b5; font-weight: bold">React</span><span style="color: #333333">,</span> { Component } <span style="color: #008800; font-weight: bold">from</span> <span style="background-color: #fff0f0">&#39;react&#39;</span>;

<span style="color: #008800; font-weight: bold">class</span> <span style="color: #BB0066; font-weight: bold">AllowOnlyNumber</span> extends Component {
    constructor(props) {
        <span style="color: #007020">super</span>(props);
        this<span style="color: #333333">.</span>onHandleTelephoneChange <span style="color: #333333">=</span> this<span style="color: #333333">.</span>onHandleTelephoneChange<span style="color: #333333">.</span>bind(this);  
        this<span style="color: #333333">.</span>state <span style="color: #333333">=</span> {
            telephone: <span style="background-color: #fff0f0">&#39;&#39;</span>,
            regexp : <span style="color: #333333">/^</span>[<span style="color: #0000DD; font-weight: bold">0</span><span style="color: #333333">-</span><span style="color: #0000DD; font-weight: bold">9</span>\b]<span style="color: #333333">+</span><span style="color: #FF0000; background-color: #FFAAAA">$</span><span style="color: #333333">/</span>
        }   
    }
    
    onHandleTelephoneChange <span style="color: #333333">=</span> e <span style="color: #333333">=&gt;</span> {
        let telephone <span style="color: #333333">=</span> e<span style="color: #333333">.</span>target<span style="color: #333333">.</span>value;

        <span style="color: #333333">//</span> <span style="color: #008800; font-weight: bold">if</span> value <span style="color: #000000; font-weight: bold">is</span> <span style="color: #000000; font-weight: bold">not</span> blank, then test the regex
        <span style="color: #008800; font-weight: bold">if</span> (telephone <span style="color: #333333">===</span> <span style="background-color: #fff0f0">&#39;&#39;</span> <span style="color: #333333">||</span> this<span style="color: #333333">.</span>state<span style="color: #333333">.</span>regexp<span style="color: #333333">.</span>test(telephone)) {
            this<span style="color: #333333">.</span>setState({ [e<span style="color: #333333">.</span>target<span style="color: #333333">.</span>name]: telephone })
        }
    };

    render() {
        <span style="color: #008800; font-weight: bold">return</span> (
            <span style="color: #333333">&lt;&gt;</span>
                <span style="color: #333333">&lt;</span> label <span style="color: #333333">&gt;</span>Allow only numbers <span style="color: #000000; font-weight: bold">in</span> Input (React) : <span style="color: #333333">&lt;/</span> label <span style="color: #333333">&gt;</span>
                <span style="color: #333333">&lt;</span> <span style="color: #007020">input</span>
                    <span style="color: #007020">type</span><span style="color: #333333">=</span><span style="background-color: #fff0f0">&quot;tel&quot;</span> name<span style="color: #333333">=</span><span style="background-color: #fff0f0">&quot;telephone&quot;</span> placeholder<span style="color: #333333">=</span><span style="background-color: #fff0f0">&quot;Telephone Number&quot;</span>
                    value<span style="color: #333333">=</span>{this<span style="color: #333333">.</span>state<span style="color: #333333">.</span>telephone}
                    onChange<span style="color: #333333">=</span>{this<span style="color: #333333">.</span>onHandleTelephoneChange}
                <span style="color: #333333">/</span> <span style="color: #333333">&gt;</span>
            <span style="color: #333333">&lt;/&gt;</span>
        );
    }
}
export default AllowOnlyNumber;
</pre></div>



#Explore other examples, <a href="https://www.code-sample.com/2018/03/reactjs-interview-questions-and-answers.html" target="_blank">65 Best FAQs and Examples</a>