React使用react-auth-code-input获取输入值时触发undefined报错如何解决

问题原因 #

react-auth-code-input 组件的 onChange 回调返回的不是原生DOM事件对象，而是用户输入的完整验证码字符串本身。你原来的写法尝试访问 e.target.value 时，e 本身已经是输入的字符串值，不存在 target 属性，因此触发 Cannot read properties of undefined (reading 'value') 报错。

解决方法 #

直接将回调入参作为验证码值使用即可，修改组件代码如下：

<AuthCode
  characters={6}
  onChange={code => setToken(code)}
  containerClassName="Input"
  inputClassName="input"
/>

额外优化建议 #

• 你当前 Token 状态的初始值设为数字0，后续存储的是字符串类型的验证码，若存在类型校验逻辑，建议将初始值修改为空字符串避免类型冲突：

  const [Token,setToken] = useState('');
  

• 如果需要在用户输满指定长度后自动触发后续逻辑，可以在回调中增加长度判断：

  onChange={code => {
    setToken(code)
    if (code.length === 6) {
      // 执行验证码提交、校验等逻辑
    }
  }}
  

内容的提问来源于stack exchange，提问作者Guilherme Cavenaghi