构建高效安全的React OTP输入组件：深度解析与实现

// 原始的事件处理函数定义
const handleInput = (e, index) => {
  // ... 逻辑，期望 e 是事件对象，index 是索引
  const isValid = expression.test(e.target.value); // 错误发生在这里
};

// 事件监听器注册
inpRef.current.forEach((input, index) => {
  input.addEventListener('input', handleInput.bind(null, index));
});

const handleInput = (e, index) => { /* ... */ };
// 绑定时：handleInput.bind(null, index)
// 实际接收：e = index值, index = Event对象

const handleInput = (index, e) => {
  // ... 逻辑，现在 index 是索引，e 是事件对象
  const current = inpRef.current[index];
  // ...
  const isValid = expression.test(e.target.value); // 现在 e 是事件对象，可以正确访问 target.value
  // ...
};
// 绑定时保持不变：handleInput.bind(null, index)
// 实际接收：index = index值, e = Event对象

import { useState, useEffect, useRef, useCallback } from 'react';
import '../src/component.css'; // 假设有基本的样式

export default function OtpInputComponent() {
  // 使用 useState 存储 OTP 数组，初始化为6个空字符串
  const [otp, setOtp] = useState(new Array(6).fill(''));
  // 使用 useRef 管理所有 input 元素的引用
  const inputRefs = useRef([]);

  // 用于收集完整的 OTP 字符串
  const fullOtp = otp.join('');

  // 模拟一个计时器，与OTP功能无关，仅为展示组件生命周期
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    return () => clearTimeout(timer);
  }, [count]);

  // 处理单个输入框的输入事件
  const handleInputChange = useCallback((index, event) => {
    const { value } = event.target;
    const currentInput = inputRefs.current[index];

    // 1. 验证输入：只允许单个数字
    const isValidDigit = /^\d$/.test(value);

    if (!isValidDigit && value !== '') {
      // 如果输入非数字或多于一位，清空当前输入
      currentInput.value = '';
      return;
    }

    // 2. 更新 OTP 状态
    const newOtp = [...otp];
    newOtp[index] = value;
    setOtp(newOtp);

    // 3. 自动聚焦到下一个输入框
    if (value && index < otp.length - 1) {
      inputRefs.current[index + 1]?.focus();
    }
  }, [otp]); // 依赖 otp 状态，确保获取到最新的值

  // 处理键盘事件（如退格、删除、方向键）
  const handleKeyDown = useCallback((index, event) => {
    const { key } = event;
    const currentInput = inputRefs.current[index];

    if (key === 'Backspace') {
      // 如果当前输入框有值，清空当前输入框
      if (currentInput.value) {
        event.preventDefault(); // 阻止默认的退格行为
        const newOtp = [...otp];
        newOtp[index] = '';
        setOtp(newOtp);
      } else if (index > 0) {
        // 如果当前输入框无值且不是第一个，聚焦到上一个输入框并清空其内容
        event.preventDefault(); // 阻止默认的退格行为
        inputRefs.current[index - 1]?.focus();
        const newOtp = [...otp];
        newOtp[index - 1] = '';
        setOtp(newOtp);
      }
    } else if (key === 'Delete') {
      // 如果当前输入框有值，清空当前输入框
      if (currentInput.value) {
        event.preventDefault();
        const newOtp = [...otp];
        newOtp[index] = '';
        setOtp(newOtp);
      } else if (index < otp.length - 1) {
        // 如果当前输入框无值且不是最后一个，聚焦到下一个输入框
        event.preventDefault();
        inputRefs.current[index + 1]?.focus();
      }
    } else if (key === 'ArrowLeft' && index > 0) {
      inputRefs.current[index - 1]?.focus();
    } else if (key === 'ArrowRight' && index < otp.length - 1) {
      inputRefs.current[index + 1]?.focus();
    }
  }, [otp]);

  // 处理粘贴事件
  const handlePaste = useCallback((index, event) => {
    event.preventDefault(); // 阻止默认粘贴行为
    const pasteData = event.clipboardData.getData('text').trim();

    // 提取纯数字，并限制长度不超过剩余的输入框数量
    const digits = pasteData.replace(/\D/g, '').slice(0, otp.length - index);

    if (digits.length > 0) {
      const newOtp = [...otp];
      for (let i = 0; i < digits.length; i++) {
        if (index + i < otp.length) {
          newOtp[index + i] = digits[i];
        }
      }
      setOtp(newOtp);

      // 粘贴后聚焦到最后一个粘贴的输入框或下一个输入框
      const lastPastedIndex = index + digits.length - 1;
      if (lastPastedIndex < otp.length - 1) {
        inputRefs.current[lastPastedIndex + 1]?.focus();
      } else {
        inputRefs.current[otp.length - 1]?.focus(); // 聚焦到最后一个输入框
      }
    }
  }, [otp]);

  // 初始聚焦到第一个输入框
  useEffect(() => {
    inputRefs.current[0]?.focus();
  }, []);

  return (
    <>
      <p>Counter: {count}</p>
      <h4>Now enter the OTP</h4>
      <div className="whole">
        <h5>Send the OTP to your phone Number</h5>
        <div className="container">
          {otp.map((digit, index) => (
            <input
              key={index}
              className="text-field"
              type="text" // 使用 text 类型以便更好地控制输入，并通过 pattern 限制
              inputMode="numeric" // 提示移动设备键盘类型
              pattern="[0-9]*" // 浏览器层面的数字输入限制
              maxLength="1" // 限制单个输入框只能输入一个字符
              value={digit} // 受控组件
              onChange={(e) => handleInputChange(index, e)} // 使用 onChange 替代 onInput
              onKeyDown={(e) => handleKeyDown(index, e)}
              onPaste={(e) => handlePaste(index, e)}
              ref={(el) => (inputRefs.current[index] = el)}
            />
          ))}
        </div>
        <button className="btn" onClick={() => console.log("OTP Submitted:", fullOtp)}>
          SUBMIT
        </button>
        <p>Current OTP: {fullOtp}</p>
      </div>
    </>
  );
}