JIYIK CN >

To create an input field with React.js that contains only allowed 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, handleChangethe function is triggered.

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

1. regexpThe regular expression we want to match in the string
2. replacement matches the value to be replaced each time

\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.replacethe 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 would be an empty string, and we probably don't want to convert an empty string to a number because we would get 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 such as e, -, ..

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 we may not want, such as e-123.

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