英文:
what's undefined here Event Object or the inputs?
问题
The error message you're encountering, "Cannot read properties of undefined (reading 'value')" typically occurs when you try to access the value property of an undefined or null object.
In your code, this error may be related to how you're handling the input fields. Without a detailed analysis, it's challenging to pinpoint the exact issue. However, you mentioned that you want to create an OTP verification page with 6 input boxes where focus shifts to the next input element when you add a value and shifts back when you press backspace.
To achieve this, you can consider using controlled components in React to manage the input values and focus. You might also want to validate your inpRef.current elements to ensure they are properly initialized.
If you encounter specific issues or have more detailed questions about your code, please provide additional context or specific problems you'd like assistance with.
英文:
i have this sample code i was writing for OTP verification in Reactjs when i run this code the output shows an error that:
Cannot read properties of undefined (reading 'value')
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>
</>
)
}
what am i doing wrong here? iwant an OTP verification page with 6input boxes so that whenever i put or add a value to an input field the focus keeps shifting to the next input element and when i press backspace the focus should shift back towards the previous element
答案1
得分: 0
你的 handleInput 函数的参数顺序错了，这里 index 是 event，而 e 是 index。因此 e.target.value 是 undefined。
将
const handleInput = (e, index) => { ... }
改为
const handleInput = (index, e) => { ... }
参考 codesanbox 示例。
英文:
You have arguments of handleInput in wrong order, here index is event and e is index. Hence e.target.value is undefined.
change
const handleInput = (e, index) => { ... }
to
const handleInput = (index, e) => { ... }
see codesanbox example.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论