在 React.js 中创建一个仅限数字的输入字段

要在 React.js 中创建一个只包含数字的输入字段:

  1. 将输入字段的类型设置为 text。
  2. 添加删除所有非数字值的 onChange 事件处理程序。
  3. 将输入值保存在状态变量中。

在 React.js 中创建一个仅限数字的输入字段

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;

我们使用 useState 钩子来跟踪输入字段的值。

每次更改输入值时,都会触发 handleChange() 函数。

我们将以下 2 个参数传递给 String.replace() 方法以删除所有非数字字符。

  • regexp 我们要在字符串中匹配的正则表达式
  • replacement 每场比赛的更换

\D 字符匹配非数字字符。

我们添加了 g(全局)标志以匹配所有非数字字符并用空字符串替换它们。

我们可能必须处理用户未在输入字段中输入任何数字的情况。

那么状态变量将是一个空字符串,我们可能不想将空字符串转换为数字,因为会得到 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;

我们可以确保输入不存储空字符串值,然后将该值转换为数字。

或者,我们可以使用输入类型编号,但这将允许用户输入 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;

一般来说,我建议不要使用这种方法,因为它更依赖于浏览器——不同的浏览器可能会以不同的方式处理输入类型的数字。