React OTP输入框：Ref、事件监听与参数绑定常见陷阱解析

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

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

// 修正后的事件处理函数定义
const handleInput = (index, e) => { // 将index放在第一个，e放在第二个
  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); // 现在e是事件对象，可以正确访问target.value

  if (!isValid) {
    e.target.value = "";
    return;
  }
  if (e.target.value.length > 1) {
    e.target.value = "";
  }

  // 可以在这里添加自动焦点切换逻辑
  if (e.target.value && next) {
    next.focus();
  } else if (!e.target.value && prev && e.inputType === 'deleteContentBackward') { // 检查是否是退格键删除
    prev.focus();
  }
};

import React, { useState, useEffect, useRef } from 'react';
import './component.css'; // 假设你的样式文件在这里

export default function Component() {
  const [otpValues, setOtpValues] = useState(Array(6).fill('')); // 使用状态管理每个输入框的值
  const inputRefs = useRef([]); // 使用useRef管理所有输入框的引用

  // 模拟一个计数器，与OTP逻辑无关，仅保留原代码功能
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setTimeout(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    return () => clearTimeout(timer);
  }, [count]);

  const handleChange = (e, index) => {
    const { value } = e.target;

    // 1. 输入校验：只允许数字，且每个输入框只允许一个字符
    const numericValue = value.replace(/\D/g, ''); // 移除所有非数字字符
    const singleCharValue = numericValue.length > 1 ? numericValue.slice(0, 1) : numericValue;

    // 2. 更新对应输入框的值
    const newOtpValues = [...otpValues];
    newOtpValues[index] = singleCharValue;
    setOtpValues(newOtpValues);

    // 3. 自动焦点前进：如果当前输入框有值且不是最后一个，则焦点移到下一个
    if (singleCharValue && index < inputRefs.current.length - 1) {
      inputRefs.current[index + 1]?.focus();
    }
  };

  const handleKeyDown = (e, index) => {
    // 4. 处理退格键：如果当前输入框为空且按下退格键，则焦点移到上一个
    if (e.key === 'Backspace' && !otpValues[index] && index > 0) {
      inputRefs.current[index - 1]?.focus();
    }
    // 5. 阻止输入框输入多个字符 (可选，因为handleChange已处理)
    // 如果希望用户无法输入超过1个字符，可以在这里阻止
    if (e.target.value.length >= 1 && e.key !== 'Backspace') {
      // e.preventDefault(); // 可以取消此行，因为handleChange已经截断了
    }
  };

  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) => (
            <input
              className="text-field"
              type="text" // 使用text类型更灵活，配合正则校验
              maxLength="1" // HTML5属性限制最大长度
              value={otpValues[index]} // 受控组件，值由状态管理
              onChange={(e) => handleChange(e, index)}
              onKeyDown={(e) => handleKeyDown(e, index)}
              ref={(el) => (inputRefs.current[index] = el)} // 存储DOM引用
              key={index}
            />
          ))}
        </div>
        <button className="btn">SUBMIT</button>
      </div>
    </>
  );
}