React Pin Input配合React Simple Keyboard输入失效问题

问题核心原因 #

• 直接通过原生DOM方法修改输入框value属于React开发反模式：React内部维护独立的状态管理与合成事件系统，直接操作document.querySelector获取DOM节点修改value，不会触发React的状态同步，组件内部无法感知到值的变化，因此会出现「DOM上能看到输入内容、长度校验逻辑正常运行，但组件始终识别不到输入值」的现象。
• 手动给输入框添加类名、ID标识再赋值的思路，本质还是绕开组件的数据流逻辑，无法实现和实体键盘输入一致的效果。

正确实现方式 #

• 优先使用组件自带的数字键盘唤起能力
  给React Pin Input组件添加type="numeric"和inputMode="numeric"属性，iPad端会自动唤起系统内置的数字键盘，不需要额外监听虚拟键盘事件手动给输入框塞值，实体键盘和系统虚拟键盘的输入事件会被组件自动捕获，走统一的值更新逻辑。

• 采用受控模式绑定组件值，所有输入统一更新状态
  自行维护PIN码的响应式状态，将状态绑定到组件的inputValue属性，所有来源的输入（实体键盘、系统虚拟键盘、自定义虚拟键盘）都通过更新该状态实现值传递，组件会自动完成输入框填充、焦点跳转、格式校验等内置逻辑，和原生实体键盘输入效果完全一致。
  参考实现代码：

  import { useState } from 'react';
  import ReactPinInput from 'react-pin-input';
  
  export default function PinVerify() {
    // 维护PIN码统一状态
    const [pinCode, setPinCode] = useState('');
  
    const handleInputChange = (value, index) => {
      // 可在此处保留原有的长度、格式校验逻辑
      if (/^\d*$/.test(value) && value.length <= 4) {
        setPinCode(value);
      }
    };
  
    return (
      <ReactPinInput
        length={4}
        inputValue={pinCode}
        onChange={handleInputChange}
        type="numeric"
        inputMode="numeric"
        // 无需给单个输入框加独立类名/ID手动赋值
      />
    )
  }
  

• 自定义虚拟键盘场景直接更新状态即可
  如果是项目内自定义的数字键盘组件，按键触发时直接调用状态更新方法修改pinCode值即可，比如点击数字键2时，执行setPinCode(prev => prev + '2')，点击删除键时执行setPinCode(prev => prev.slice(0, -1))，不需要操作DOM。

• 之前编写的手动查询DOM赋值的代码可以全部删除，这类代码不仅会导致值不同步，还可能引发焦点错乱、输入回退异常等问题。

内容的提问来源于stack exchange，提问作者Sus Hill