JIYIK CN >

To create an input field in React.js that only contains numbers:

1. Set the input field's type to text.
2. onChangeAdd an event handler that removes all non-numeric values .
3. Save the input value in a state variable.

import {useState} from 'react';

const App = () => {
  const [value, setValue] = useState('');

  const handleChange = event => {
    const result = event.target.value.replace(/\D/g, '');

    setValue(result);
  };

  console.log(value);
  console.log(typeof value);
  console.log(Number(value));

  return (
    <div>
      <div>!Hello 123 World 456?___</div>
      <input
        type="text"
        placeholder="Your fav number"
        value={value}
        onChange={handleChange}
      />
    </div>
  );
};

export default App;

We use useStatethe hook to track the value of the input field.

Every time the input value is changed, handleChange()the function is triggered.

We pass the following 2 parameters to String.replace()the method to remove all non-numeric characters.

• regexpThe regular expression we want to match in the string
• replacementChanges per game

\Dcharacter matches a non-digit character.

We added gthe (global) flag to match all non-numeric characters and replace them with an empty string.

This means that if the string contains only non-numeric characters, we will replace them all with an empty string, and String.replace()the method will return an empty string.

We might have to handle the case where the user does not enter any number in the input field.

Then the state variable will be an empty string, and we probably don't want to convert an empty string to a number because that would give us 0 .

import {useState} from 'react';

const App = () => {
  const [value, setValue] = useState('');

  const handleChange = event => {
    const result = event.target.value.replace(/\D/g, '');

    setValue(result);
  };

  console.log(value);
  console.log(typeof value);
  console.log(Number(value));

  // 👇️ validation
  if (value !== '') {
    const num = Number(value);
    // 👉️ submit form
  }

  return (
    <div>
      <div>!Hello 123 World 456?___</div>
      <input
        type="text"
        placeholder="Your fav number"
        value={value}
        onChange={handleChange}
      />
    </div>
  );
};

export default App;

We can ensure that the input does not store an empty string value and then convert that value to a number.

Alternatively, we could use input type number, but this would allow the user to enter characters like e, -, ., etc.

import {useState} from 'react';

const App = () => {
  const [value, setValue] = useState('');

  const handleChange = event => {
    setValue(event.target.value);
  };

  console.log(value);
  console.log(typeof value);
  console.log(Number(value));

  return (
    <div>
      <div>.Hello- 123 World 456?___</div>
      <input
        type="number"
        placeholder="Your fav number"
        value={value}
        onChange={handleChange}
      />
    </div>
  );
};

export default App;

请注意, even if the input type is set to number, its value is still of type string.

This approach also allows the user to enter values ​​that you might not want, e-123e.g.

In general, I would advise against this approach, as it is more browser dependent - different browsers may handle input types of numbers differently.