我為Reactjs中的OTP驗證編寫了這個示例代碼，當(dāng)我運行這個代碼時，輸出顯示一個錯誤:

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

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>

    

    </>

    )


}

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

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

變化

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

到

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

請參見codesanbox示例。