迹忆客 专注技术分享

要使用React.js 创建一个仅包含允许的数字的输入字段：

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

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 方法以删除所有非数字字符。

1. regexp 我们要在字符串中匹配的正则表达式
2. 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;

请注意 ，即使输入的类型设置为数字，它的值仍然是字符串类型。

这种方法还允许用户输入我们可能不需要的值，如 e-123。

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