Have you ever used number input and added special logic on onChange event to prevent +, – and e charterers saving to state. In this article we will gonna learn how to write a util function to block these +, – and e in your number input.
Problem
Let’s see below example.
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [value, setValue] = useState("");
return (
<div className="App">
<input
type="Number"
value={value}
onChange={({ target: { value } }) => {
setValue(value);
}}
/>
</div>
);
}
If you notice we are using a number input and it’s also working fine but we don’t want user to enter +, – and e while typing.
Solution
The solution is very straight forward. We will gonna write a reusable util function which basically gonna block invalid characters.
export const blockInvalidChar = e => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault();
We can simply import this function and use it on onKeyPress event.
import React, { useState } from "react";
import { blockInvalidChar } from "./blockInvalidChar";
import "./styles.css";
export default function App() {
const [value, setValue] = useState("");
return (
<div className="App">
<input
type="Number"
value={value}
onKeyDown={blockInvalidChar}
onChange={({ target: { value } }) => {
setValue(value);
}}
/>
</div>
);
}
I used to cast value to number explicitly using
Number(e.target.value).