我為Reactjs中的OTP驗(yàn)證編寫了這個(gè)示例代碼，當(dāng)我運(yùn)行這個(gè)代碼時(shí)，輸出顯示一個(gè)錯(cuò)誤:

無法讀取未定義的屬性(讀取“值”)

import { useState, useEffect, useRef } from 'react'

import '../src/component.css'

export default function Component(){

  

  const[count,setCount] = useState(0);

  const inpRef = useRef([]);

  useEffect(()=>{

    

    setTimeout(()=>{

      setCount(count+1)

    },1000);

  

    const handleInput =(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 ="";

      }

     

    }

    

    inpRef.current.forEach((input,index)=>{

      input.addEventListener('input',handleInput.bind(null,index))

    })

   return ()=>{

     inpRef.current.forEach((input,index)=>{

      input.removeEventListener('input',handleInput.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"

      ref = {(ref) =>{

        inpRef.current[index] = ref;

      }} 

      key ={index}

      />

    })}

    </div>

    <button className ="btn">SUBMIT</button>

    </div>

    

    </>

    )


}

我到底做錯(cuò)了什么？我想要一個(gè)有6個(gè)輸入框的OTP驗(yàn)證頁(yè)面，以便每當(dāng)我把一個(gè)值或添加到一個(gè)輸入字段時(shí)，焦點(diǎn)保持轉(zhuǎn)移到下一個(gè)輸入元素，當(dāng)我按backspace時(shí)，焦點(diǎn)應(yīng)該轉(zhuǎn)移回前一個(gè)元素

您的handleInput參數(shù)順序錯(cuò)誤，此處index是event，e是index。因此e.target.value未定義。

變化

const handleInput = (e, index) => { ... }

到

const handleInput = (index, e) => { ... }

請(qǐng)參見codesanbox示例。