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

React 2023-03-03

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

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

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（全局）标志以匹配所有非数字字符并用空字符串替换它们。

这意味着如果字符串只包含非数字字符，我们会将它们全部替换为空字符串，并且 String.replace() 方法将返回一个空字符串。

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

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