React Input type="number" fields don't trigger onChange

Question

I have added <input type="number" value={value} onChange={onChange}> to a form and am checking the format of the input using a simplified onChange function as illustrated in the following component:

  export function App() {
    const [value, setValue] = useState("");

    const onChange = (event) => {
      console.log("onChange called", event.target.value);
      setValue(event.target.value);
    };

    return <input type="number" value={value} onChange={onChange} />;
 }

I would like restrict the value of the input to only be integers using validation in the onChange function.

However, before I can add the validation, I noticed that when a user enters a valid non-integer number input, such as ., e or E, the value of the input is not passed to the onChange function, and hence I'm not able to perform my validation.

Below is a codesandbox that can be used to reproduce the issue.

What is the best way to add validation to an input field to ensure that the input is a whole number?

That's the whole purpose of putting type='number' as an attribute in your input field. HTML does that for you. The browser solves that for you. Why do you need to validate yourself? — Prateek Thapa
– Prateek Thapa, Commented Sep 30, 2020 at 13:26

Randall · Accepted Answer · 2020-09-30 13:27:37Z

3

The e is the only letter that's accepted in a number field because it allows for exponents. You could use input type="text" but it doesn't give you the browser's native up and down arrows that type="number" does. And the pattern attribute validates on submission but doesn't stop someone from typing the 'e' in the first place. In React you can use this to completely block the 'e' key from being typed in a number input:

const [symbolsArr] = useState(["e", "E", "+", "-", "."]);
  return (
    <div className="App">
      <input
        type="number"
        onKeyDown={e => symbolsArr.includes(e.key) && e.preventDefault()}
      />
    </div>
  );

Codesandbox Demo

answered Sep 30, 2020 at 13:27

Randall

2,8976 gold badges44 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Aljohn Yamaro Over a year ago

when I add console.log on onKeyDown nothing happends

Randall Over a year ago

@AljohnYamaro copy codesandbox link and see in demo. Everything work.

Aljohn Yamaro Over a year ago

I recheck the demo and it works, apology I will update my down to upvote

Aljohn Yamaro Over a year ago

can't update says "You last voted on this answer 8 hours ago. Your vote is now locked in unless this answer is edited."

Lukáš Smida Over a year ago

This doesn't work on copy paste, drag and drop etc.

Collectives™ on Stack Overflow

React Input type="number" fields don't trigger onChange

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related