React中OTP输入框的事件处理与焦点管理

// 错误的参数顺序
// const handleInput = (e, index) => { ... }

// 正确的参数顺序
const handleInput = (index, e) => {
  // 现在 e 是事件对象，index 是传入的索引
  const current = inpRef.current[index];
  let next = inpRef.current[index + 1];
  let prev = inpRef.current[index - 1];

  const expression = /^\d+$/;
  const isValid = expression.test(e.target.value);

  if (!isValid) {
    e.target.value = "";
    return;
  }
  if (e.target.value.length > 1) {
    e.target.value = "";
    return;
  }
  // ... 其他逻辑
};

import { useState, useEffect, useRef } from 'react';
import '../src/component.css'; // 假设样式文件存在

export default function Component() {
  const [count, setCount] = useState(0);
  const inpRef = useRef([]); // 用于存储所有input元素的引用

  // 模拟计数器，与OTP逻辑无关，可忽略
  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    return () => clearTimeout(timer);
  }, [count]);

  // 主要的OTP输入框事件处理逻辑
  useEffect(() => {
    // 处理输入事件，包括验证和焦点跳转
    const handleInput = (index, e) => {
      const currentInput = inpRef.current[index];
      const nextInput = inpRef.current[index + 1];

      // 1. 输入值验证：只允许数字，且长度不超过1
      const expression = /^\d+$/;
      const isValid = expression.test(e.target.value);

      if (!isValid) {
        e.target.value = ""; // 清空非法输入
        return;
      }
      if (e.target.value.length > 1) {
        e.target.value = e.target.value.slice(0, 1); // 截断多余字符
        // 或者直接清空 e.target.value = "";
      }

      // 2. 自动焦点跳转到下一个输入框
      if (e.target.value && nextInput) {
        nextInput.focus();
      }
    };

    // 处理键盘事件，特别是退格键
    const handleKeyDown = (index, e) => {
      const currentInput = inpRef.current[index];
      const prevInput = inpRef.current[index - 1];

      // 如果按下退格键且当前输入框为空，则焦点跳转到上一个输入框
      if (e.key === 'Backspace' && !currentInput.value && prevInput) {
        prevInput.focus();
      }
    };

    // 遍历所有input元素，添加事件监听器
    inpRef.current.forEach((input, index) => {
      if (input) { // 确保input引用存在
        input.addEventListener('input', handleInput.bind(null, index));
        input.addEventListener('keydown', handleKeyDown.bind(null, index));
      }
    });

    // 返回清理函数，在组件卸载时移除事件监听器
    return () => {
      inpRef.current.forEach((input, index) => {
        if (input) {
          input.removeEventListener('input', handleInput.bind(null, index));
          input.removeEventListener('keydown', handleKeyDown.bind(null, index));
        }
      });
    };
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行一次

  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">
          {[...Array(6)].map((_, index) => {
            return (
              <input
                className="text-field"
                type="number" // 使用number类型可以限制输入，但需要额外的校验来处理非数字输入
                maxLength="1" // 限制输入长度为1
                ref={(el) => {
                  // 确保ref数组的顺序和DOM元素的顺序一致
                  // el可能是null，所以需要判断
                  if (el) {
                    inpRef.current[index] = el;
                  }
                }}
                key={index}
              />
            );
          })}
        </div>
        <button className="btn">SUBMIT</button>
      </div>
    </>
  );
}