求助：无需第三方库实现React邮箱输入掩码的方法

以下是完全不依赖第三方库的实现方案，核心通过React受控组件+自定义输入处理逻辑，实现类似示例中的邮箱格式控制效果：

import { useState } from 'react';

const EmailInput = () => {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  // 邮箱格式验证逻辑
  const validateEmail = (value) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
    if (!value) return '邮箱不能为空';
    if (!emailRegex.test(value)) return '请输入有效的邮箱地址（如：name@domain.com）';
    return '';
  };

  const handleInputChange = (e) => {
    let inputValue = e.target.value;

    // 1. 移除所有空格，禁止输入空白字符
    inputValue = inputValue.replace(/\s/g, '');
    // 2. 限制仅允许一个@符号，多余的自动截断
    const atSymbolCount = (inputValue.match(/@/g) || []).length;
    if (atSymbolCount > 1) {
      inputValue = inputValue.slice(0, inputValue.lastIndexOf('@'));
    }
    // 3. 自动转换为小写（邮箱不区分大小写，提升输入体验）
    inputValue = inputValue.toLowerCase();

    setEmail(inputValue);
    // 实时验证并更新错误提示
    setError(validateEmail(inputValue));
  };

  return (
    <div style={{ margin: '16px' }}>
      <label htmlFor="email-input" style={{ display: 'block', marginBottom: '8px' }}>
        邮箱地址
      </label>
      <input
        id="email-input"
        type="text"
        value={email}
        onChange={handleInputChange}
        placeholder="yourname@example.com"
        style={{
          padding: '8px 12px',
          border: error ? '1px solid #ff4d4f' : '1px solid #d9d9d9',
          borderRadius: '4px',
          width: '300px'
        }}
      />
      {error && (
        <p style={{ color: '#ff4d4f', margin: '4px 0 0 0', fontSize: '14px' }}>
          {error}
        </p>
      )}
    </div>
  );
};

export default EmailInput;

关键功能说明 #

• 格式强制控制：自动移除空格、限制单个@符号，避免用户输入不符合邮箱结构的内容
• 实时验证反馈：输入过程中即时校验格式，通过边框颜色和文字提示反馈错误
• 体验优化：自动转小写、清晰的占位符引导，降低用户输入错误概率

进阶扩展（可选） #

如果需要更贴近示例的掩码引导效果（比如输入@后自动提示域名后缀），可以手动添加简单的下拉提示逻辑：

// 在组件中添加域名提示状态
const [domainSuggestions, setDomainSuggestions] = useState([]);

// 修改handleInputChange，当输入@后触发提示
const handleInputChange = (e) => {
  let inputValue = e.target.value;

  // ... 原有格式处理逻辑 ...
  
  // 当输入包含@且@后有内容时，生成域名提示
  if (inputValue.includes('@')) {
    const domainPrefix = inputValue.split('@')[1];
    const commonDomains = ['gmail.com', 'yahoo.com', 'outlook.com', 'qq.com'];
    const suggestions = commonDomains.filter(domain => domain.startsWith(domainPrefix));
    setDomainSuggestions(suggestions);
  } else {
    setDomainSuggestions([]);
  }

  setEmail(inputValue);
  setError(validateEmail(inputValue));
};

// 在组件中渲染提示列表
{domainSuggestions.length > 0 && (
  <ul style={{ listStyle: 'none', padding: '0', margin: '4px 0 0 0', border: '1px solid #d9d9d9', borderRadius: '4px', width: '300px' }}>
    {domainSuggestions.map(domain => (
      <li 
        key={domain}
        style={{ padding: '8px 12px', cursor: 'pointer', backgroundColor: '#f5f5f5' }}
        onClick={() => setEmail(inputValue.split('@')[0] + '@' + domain)}
      >
        {inputValue.split('@')[0]}@{domain}
      </li>
    ))}
  </ul>
)}

内容的提问来源于stack exchange，提问作者nesma aboki