迹忆客 专注技术分享

在 React 中检查输入值是否为有效数字：

1. 检查输入的值是否不是空字符串或仅包含空格。
2. 将值传递给 isNaN() 函数。
3. 如果 isNaN 返回 false，则该值为有效数字。

import {useState} from 'react';

function isNumber(str) {
  if (str.trim() === '') {
    return false;
  }

  return !isNaN(str);
}

export default function App() {
  const [num, setNum] = useState('');

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

    if (isNumber(event.target.value)) {
      console.log('✅ It is a valid number');
    } else {
      console.log('⛔️ It is NOT a valid number');
    }
  };

  return (
    <div>
      <input
        id="num"
        name="num"
        type="text"
        onChange={handleChange}
        value={num}
      />
    </div>
  );
}

该示例显示如何检查输入字段的值是否为有效数字。

我们在输入字段上设置了 onChange 属性，所以每次它的值改变时，都会调用 handleChange 函数。

在我们的 handleChange 函数中，我们更新 num 状态变量并检查该值是否为有效数字。

请注意 ，输入字段的值始终是字符串类型，无论其类型属性设置为文本还是数字。

在我们的 isNumber 函数中，我们检查传入的字符串是否不为空并且不只包含空格。

然后，我们使用 isNaN 函数来检查提供的字符串是否不是数字。

我们使用逻辑 NOT ! 运算符来否定 isNaN 函数返回的值。

isNaN（不是数字）函数尝试将字符串转换为数字，如果失败，则返回 true。

console.log(isNaN('hello')); // 👉️ true
console.log(isNaN('')); // 👉️ false
console.log(isNaN('   ')); // 👉️ false

乍一看这似乎很令人困惑，但是 isNaN 函数将空字符串或包含空格的字符串转换为数字并得到值 0，因此它返回 false。

console.log(Number('')); // 👉️ 0
console.log(Number('   ')); // 👉️ 0

这就是我们使用 trim() 方法来修剪字符串并验证它不是空字符串的原因。

我们知道，如果调用 isNaN 函数时使用至少包含 1 个字符的字符串并返回 true，则该字符串不是有效数字。

相反，如果使用至少包含 1 个字符的字符串调用 isNaN 函数并返回 false，则该字符串是有效数字。

或者，我们可以使用正则表达式只允许用户在您的输入字段中输入数字。

如果你想创建一个只允许数字的输入字段，请查看我的另一篇文章 - 在 React 中创建一个仅限数字的输入字段。