迹忆客 专注技术分享

在 React 中检查输入是否为空：

1. 调用字段值的 trim() 方法。
2. 访问值的长度属性。
3. 如果该字段的值的长度为 0，则为空，否则为空。

import {useState} from 'react';

export default function App() {
  const [message, setMessage] = useState('');

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

  const handleClick = event => {
    event.preventDefault();

    if (message.trim().length !== 0) {
      console.log('input value is NOT empty');
    } else {
      console.log('input value is empty');
    }
  };

  return (
    <div>
      <h2>String: {message}</h2>

      <input
        id="message"
        name="message"
        onChange={handleChange}
        autoComplete="off"
      />

      <br />
      <br />

      <button onClick={handleClick}>Check if input empty</button>
    </div>
  );
}

我们使用 trim() 方法从字段值中删除任何前导或尾随空格。

console.log(' hi '.trim()); // 👉️ "hi"

console.log('    '.trim()); // 👉️ ""

这有助于我们确保用户不能只输入一个空白区域来绕过我们的验证。

如果在对其调用 trim() 方法后字段值的长度不等于 0，则该字段至少包含 1 个字符。

如果我们的用例需要超过 1 个字符才能使输入不被视为空，请调整我们的 if 语句。

const str = 'hello';

if (str.trim().length > 2) {
  console.log('String contains more than 2 characters');
}

if 块只会在 str 变量存储包含至少 3 个字符的字符串时运行。