当前位置：首页 > 文章列表 > 文章 > 前端 > React实现OTP输入框教程

React实现OTP输入框教程

2025-08-01 13:33:29 0浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《React OTP输入框实现指南》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

React OTP输入框：实现自动焦点跳转与输入验证的专业指南

本文深入探讨了在React中构建OTP（一次性密码）输入组件的常见问题与解决方案，特别是如何解决bind方法导致事件参数错位引发的undefined错误。教程将详细指导如何实现OTP输入框的自动焦点跳转（输入后移至下一格，按退格键移至上一格）和输入内容验证（仅允许数字），并提供完整的代码示例及最佳实践，帮助开发者构建用户体验更佳的OTP输入界面。

1. 理解OTP输入组件的核心需求

在Web应用中，OTP（一次性密码）验证是常见的安全机制。一个用户友好的OTP输入界面通常具备以下特性：

多位输入框： OTP通常由多位数字组成，每个数字对应一个独立的输入框。
自动焦点跳转： 用户在一个输入框中输入一个字符后，焦点自动跳转到下一个输入框，提升输入效率。
退格键焦点回溯： 当用户按下退格键清除当前输入或当前输入为空时，焦点应自动回溯到前一个输入框。
输入内容验证： 仅允许用户输入数字，并限制每个输入框只能输入一个字符。

2. 解决Cannot read properties of undefined (reading 'value')错误

在React中，当我们将事件监听器附加到DOM元素上，并使用Function.prototype.bind()方法预设参数时，一个常见的错误是参数顺序混淆。原始代码中，addEventListener的事件回调函数通常会接收到一个事件对象作为其第一个参数。然而，当使用handleInput.bind(null, index)时，index被作为第一个参数传递，而实际的事件对象则成了第二个参数。

错误示例 (原代码):

// handleInput 定义: (e, index) => { ... }
// 绑定时: input.addEventListener('input', handleInput.bind(null, index))
// 结果: e 实际上是 index, index 实际上是事件对象
const handleInput = (e, index) => { // 这里的 e 实际上是 index，导致 e.target.value 报错
    // ...
    const isValid = expression.test(e.target.value); // 报错：e.target 为 undefined
}

正确修正： 要解决这个问题，只需调整handleInput函数参数的顺序，使其与bind方法传递的顺序一致。

// 修正后的 handleInput 定义: (index, e) => { ... }
// 绑定时保持不变: input.addEventListener('input', handleInput.bind(null, index))
// 结果: index 是我们预设的索引，e 是正确的事件对象
const handleInput = (index, e) => {
    // 现在 e 是正确的事件对象，e.target.value 可以正常访问
    const value = e.target.value;
    // ... 其他逻辑
}

3. 构建OTP输入组件的实现细节

我们将使用useState管理组件状态（虽然本例中OTP值直接从DOM获取，但useState可用于其他状态如计时器），useRef来直接访问DOM元素，以及useEffect来管理事件监听器的生命周期。

3.1 状态与Refs的初始化

count: 示例中用于计时器的状态，与OTP逻辑无关，但保留以保持原始代码结构。
inpRef: 一个useRef Hook，其.current属性将是一个数组，用于存储对所有OTP输入框DOM元素的引用。

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

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

  // ... (useEffect 部分)
  // ... (return JSX 部分)
}

3.2 动态生成输入框并绑定Refs

通过数组的map方法，我们可以动态生成指定数量的OTP输入框。关键在于如何将每个输入框的DOM引用存储到inpRef.current数组中。

// 在 return JSX 中
<div className="container">
  {[...Array(6)].map((_, index) => {
    return (
      &lt;input
        className=&quot;text-field&quot;
        type=&quot;text&quot; // 建议使用 text 类型以更好地控制输入，而非 number
        maxLength=&quot;1&quot; // 限制输入一个字符
        ref={(el) =&gt; {
          inpRef.current[index] = el; // 将每个 input 元素的引用存储到数组中
        }}
        key={index}
      />
    );
  })}
</div>

注意： 将type="number"改为type="text"并设置maxLength="1"通常是更好的实践，因为type="number"在不同浏览器中行为可能不一致，且其自带的增减箭头可能干扰用户体验。我们可以通过JavaScript进行严格的数字验证。

3.3 事件监听器与焦点管理

为了实现自动焦点跳转和退格键回溯，我们需要监听input和keydown事件。这些事件监听器需要在组件挂载时添加，并在卸载时清除，这正是useEffect的用武之地。

  useEffect(() => {
    // 计时器逻辑 (与OTP无关，保留原代码)
    const timer = setTimeout(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 输入事件处理函数：处理输入验证和前进焦点
    const handleInput = (index, e) => {
      const currentInput = inpRef.current[index];
      const nextInput = inpRef.current[index + 1];

      const value = e.target.value;
      const expression = /^\d+$/; // 匹配数字的正则表达式

      // 1. 输入验证：只允许数字，且只取第一个字符
      if (!expression.test(value) && value !== '') {
        e.target.value = ''; // 清除非数字输入
        return;
      }
      if (value.length > 1) {
        e.target.value = value.charAt(0); // 如果粘贴了多个字符，只保留第一个
      }

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

    // 键盘按下事件处理函数：处理退格键和后退焦点
    const handleKeyDown = (index, e) => {
      const currentInput = inpRef.current[index];
      const prevInput = inpRef.current[index - 1];

      if (e.key === 'Backspace') {
        if (currentInput.value === '' && prevInput) {
          // 如果当前输入框为空，并且存在前一个输入框，则焦点回溯到前一个
          prevInput.focus();
          // 阻止默认的退格行为，防止浏览器回退等
          e.preventDefault();
        }
      }
    };

    // 遍历所有输入框，添加事件监听器
    inpRef.current.forEach((input, index) => {
      if (input) { // 确保 input 元素已经渲染并被引用
        input.addEventListener('input', handleInput.bind(null, index));
        input.addEventListener('keydown', handleKeyDown.bind(null, index));
      }
    });

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

代码解析：

handleInput(index, e): 负责处理用户输入时的行为。它首先进行输入验证，确保只允许单个数字。然后，如果当前输入框有值且存在下一个输入框，则自动将焦点移动到下一个输入框。
handleKeyDown(index, e): 负责处理键盘按下时的行为，特别是退格键。如果当前输入框为空且存在前一个输入框，它会将焦点移动到前一个输入框，并通过e.preventDefault()阻止浏览器默认的退格行为（例如，在某些情况下可能会导致页面回退）。
useEffect的依赖数组: 传入空数组[]意味着这个useEffect只会在组件挂载时执行一次，并在组件卸载时执行清理函数。这对于管理全局或一次性事件监听器非常有用。
清理函数: return () => { ... }中的代码会在组件卸载时执行，确保所有事件监听器都被正确移除，防止内存泄漏。

4. 完整的代码示例

import { useState, useEffect, useRef } from 'react'
import '../src/component.css' // 假设你的样式文件路径正确

export default function Component() {
  const [count, setCount] = useState(0); // 计时器状态，与OTP无关
  const inpRef = useRef([]); // 用于存储所有 OTP input 元素的引用

  useEffect(() => {
    // 计时器逻辑 (与OTP无关，保留原代码)
    const timer = setTimeout(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 输入事件处理函数：处理输入验证和前进焦点
    const handleInput = (index, e) => {
      const currentInput = inpRef.current[index];
      const nextInput = inpRef.current[index + 1];

      const value = e.target.value;
      const expression = /^\d+$/; // 匹配数字的正则表达式

      // 1. 输入验证：只允许数字，且只取第一个字符
      if (!expression.test(value) && value !== '') {
        e.target.value = ''; // 清除非数字输入
        return;
      }
      if (value.length > 1) {
        e.target.value = value.charAt(0); // 如果粘贴了多个字符，只保留第一个
      }

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

    // 键盘按下事件处理函数：处理退格键和后退焦点
    const handleKeyDown = (index, e) => {
      const currentInput = inpRef.current[index];
      const prevInput = inpRef.current[index - 1];

      if (e.key === 'Backspace') {
        if (currentInput.value === '' && prevInput) {
          // 如果当前输入框为空，并且存在前一个输入框，则焦点回溯到前一个
          prevInput.focus();
          // 阻止默认的退格行为，防止浏览器回退等
          e.preventDefault();
        }
      }
    };

    // 遍历所有输入框，添加事件监听器
    inpRef.current.forEach((input, index) => {
      if (input) { // 确保 input 元素已经渲染并被引用
        input.addEventListener('input', handleInput.bind(null, index));
        input.addEventListener('keydown', handleKeyDown.bind(null, index));
      }
    });

    // 清理函数：组件卸载时移除事件监听器
    return () => {
      clearTimeout(timer); // 清除计时器
      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 (
              &lt;input
                className=&quot;text-field&quot;
                type=&quot;text&quot; // 建议使用 text 类型以更好地控制输入
                maxLength=&quot;1&quot; // 限制输入一个字符
                ref={(el) =&gt; {
                  inpRef.current[index] = el; // 将每个 input 元素的引用存储到数组中
                }}
                key={index}
              />
            );
          })}
        </div>
        <button className="btn">SUBMIT</button>
      </div>
    </>
  );
}

5. 注意事项与最佳实践

Refs的使用场景: useRef适用于直接操作DOM元素，例如管理焦点、播放媒体等。对于需要响应式更新UI的数据，应优先使用useState。
事件监听器的管理: 在useEffect中添加事件监听器时，务必在清理函数中移除它们，以避免内存泄漏和不必要的行为。
type="text"与maxLength="1": 相较于type="number"，使用type="text"并结合maxLength="1"和JavaScript验证，可以提供更一致的跨浏览器行为和更精细的输入控制。
可访问性 (Accessibility): 对于OTP输入框，可以考虑添加aria-label或aria-labelledby属性，以提高屏幕阅读器用户的体验。例如，aria-label={OTP digit ${index + 1}}。

OTP值获取: 在上述实现中，OTP的完整值可以通过遍历inpRef.current并拼接每个输入框的value来获取，例如在提交按钮的点击事件中。

const handleSubmit = () => {
    const otpValue = inpRef.current.map(input => input ? input.value : '').join('');
    console.log("Submitted OTP:", otpValue);
    // 进行OTP验证逻辑
};
// 在 JSX 中将 handleSubmit 绑定到按钮
<button className="btn" onClick={handleSubmit}>SUBMIT</button>