admin管理员组文章数量:1201787
I'm creating a game like wordle and, to do this, when the user writes a letter, the app should focus the next input. I can't do this, and I don't know why.
const GameLine = (props) => {
const lineIndex = props.index;
const checkTry = () => {
const userGuess = firstLetter + ' ' + secondLetter + ' ' + thirdLetter + ' ' + fourthLetter + ' ' + fifthLetter;
console.log(userGuess);
}
const [firstLetter, setFirstLetter] = useState(null);
const [secondLetter, setSecondLetter] = useState(null);
const [thirdLetter, setThirdLetter] = useState(null);
const [fourthLetter, setFourthLetter] = useState(null);
const [fifthLetter, setFifthLetter] = useState(null);
const handleNextInput = (e) => {
console.log("ID atual: " + e.target.id);
const fieldName = e.target.id.split('-')[1];
const nextSibiling = document.getElementById(`box${lineIndex}-${parseInt(fieldName) + 1}`);
console.log(nextSibiling);
if(nextSibiling !== null){
nextSibiling.focus();
}
}
return (
<BoxesDiv>
<Box1 type="text" id={ `box${lineIndex}-1`} onChange={(e) => { handleNextInput(e); setFirstLetter(e.target.value)}} value={firstLetter} />
<Box2 type="text" id={ `box${lineIndex}-2`} onChange={(e) => setSecondLetter(e.target.value)} value={secondLetter} onKeyPress={(e)=>handleNextInput(e)}/>
<Box3 type="text" id={ `box${lineIndex}-3`} onChange={(e) => { handleNextInput(e); setThirdLetter(e.target.value)}} value={thirdLetter} />
<Box4 type="text" id={ `box${lineIndex}-4`} onChange={(e) => { handleNextInput(e); setFourthLetter(e.target.value)}} value={fourthLetter} />
<Box5 type="text" id={ `box${lineIndex}-5`} onChange={(e) => setFifthLetter(e.target.value)} value={fifthLetter} onKeyPress={ (e)=>{ if(e.key === "Enter"){checkTry()} } }/>
</BoxesDiv>
);
}
I'm trying to get the next input with id and use Element.focus(), but nothing happens. Could someone help me to find where's my error?
Thanks
I'm creating a game like wordle and, to do this, when the user writes a letter, the app should focus the next input. I can't do this, and I don't know why.
const GameLine = (props) => {
const lineIndex = props.index;
const checkTry = () => {
const userGuess = firstLetter + ' ' + secondLetter + ' ' + thirdLetter + ' ' + fourthLetter + ' ' + fifthLetter;
console.log(userGuess);
}
const [firstLetter, setFirstLetter] = useState(null);
const [secondLetter, setSecondLetter] = useState(null);
const [thirdLetter, setThirdLetter] = useState(null);
const [fourthLetter, setFourthLetter] = useState(null);
const [fifthLetter, setFifthLetter] = useState(null);
const handleNextInput = (e) => {
console.log("ID atual: " + e.target.id);
const fieldName = e.target.id.split('-')[1];
const nextSibiling = document.getElementById(`box${lineIndex}-${parseInt(fieldName) + 1}`);
console.log(nextSibiling);
if(nextSibiling !== null){
nextSibiling.focus();
}
}
return (
<BoxesDiv>
<Box1 type="text" id={ `box${lineIndex}-1`} onChange={(e) => { handleNextInput(e); setFirstLetter(e.target.value)}} value={firstLetter} />
<Box2 type="text" id={ `box${lineIndex}-2`} onChange={(e) => setSecondLetter(e.target.value)} value={secondLetter} onKeyPress={(e)=>handleNextInput(e)}/>
<Box3 type="text" id={ `box${lineIndex}-3`} onChange={(e) => { handleNextInput(e); setThirdLetter(e.target.value)}} value={thirdLetter} />
<Box4 type="text" id={ `box${lineIndex}-4`} onChange={(e) => { handleNextInput(e); setFourthLetter(e.target.value)}} value={fourthLetter} />
<Box5 type="text" id={ `box${lineIndex}-5`} onChange={(e) => setFifthLetter(e.target.value)} value={fifthLetter} onKeyPress={ (e)=>{ if(e.key === "Enter"){checkTry()} } }/>
</BoxesDiv>
);
}
I'm trying to get the next input with id and use Element.focus(), but nothing happens. Could someone help me to find where's my error?
Thanks
Share Improve this question edited Feb 16, 2022 at 16:50 Hugo Folloni asked Feb 16, 2022 at 16:45 Hugo FolloniHugo Folloni 3771 gold badge2 silver badges13 bronze badges5 Answers
Reset to default 6React's way of accessing elements is to use refs. You can create an array of refs initially and map them to the inputs. Add a keyup event listener to update the input focus to the next input.
Try like below.
import { useState, createRef, useEffect } from "react";
const GameLine = (props) => {
const lineIndex = props.index;
// number of inputs
const numerOfInputs = props?.numerOfInputs || 5;
// create a array of refs
const [inputRefsArray] = useState(() =>
Array.from({ length: numerOfInputs }, () => createRef())
);
// state for current input index
const [currentIndex, setCurrentIndex] = useState(0);
// save letters in a array where each entry in the array refers to an input
const [letters, setLetters] = useState(() =>
Array.from({ length: numerOfInputs }, () => "")
);
const handleKeyPress = () => {
setCurrentIndex((prevIndex) => {
// calculate the next input index, next input after the final input will be again the first input. you can change the logic here as per your needs
const nextIndex = prevIndex < numerOfInputs - 1 ? prevIndex + 1 : 0;
const nextInput = inputRefsArray?.[nextIndex]?.current;
nextInput.focus();
nextInput.select();
return nextIndex;
});
};
useEffect(() => {
// focus the firs iput initially
if (inputRefsArray?.[0]?.current) {
inputRefsArray?.[0]?.current?.focus();
}
// add the event listener for keyup keyboard event
window.addEventListener("keyup", handleKeyPress, false);
// remove the event listener when the component unmounts
return () => {
window.removeEventListener("keyup", handleKeyPress);
};
}, []);
return (
<div>
{inputRefsArray.map((ref, index) => {
return (
<input
ref={ref}
type="text"
id={`box${index}-1`}
onChange={(e) => {
const { value } = e.target;
setLetters((letters) =>
letters.map((letter, letterIndex) =>
letterIndex === index ? value : letter
)
);
}}
onClick={(e) => {
setCurrentIndex(index);
e.target.select();
}}
value={letters[index]}
max={"1"}
/>
);
})}
</div>
);
};
export default GameLine;
you can declare a function that checks if the user pressed the enter key. If yes, you will get the index of the first element in the form. and then focusing on the element that have (index + 2). Because the first TextField has index =0 and the second TextField has the index = 2
function handleEnter(event){
console.log(event.key)
if (event.key === "Enter") {
const form = event.target.form;
const index = [...form].indexOf(event.target);
console.log(index)
form[index + 2].focus();
event.preventDefault();
}
}
<form>
<TextField onKeyDown={(e)=>handleEnter(e)} variant="outlined" label='name' />
<TextField onKeyDown={(e)=>handleEnter(e)} variant="outlined" label='age' />
<Buttontype='submit' variant="contained" >Ajouter le client</Button>
</form>
You should called handleNextInput function for second box. I think you could onKeyUp function for handleNextInput.
<Box2 onKeyUp={(e)=>handleNextInput(e)} ... />
If, for some reason you don't have access to the event, you can do this:
const someMethodWithoutAccessToEvent = () => {
const active = document.activeElement;
if (active?.nextElementSibling) {
(active.nextElementSibling as HTMLElement).focus();
}
}
Works like charm
I use the input id, and the document for set the focus
document.getElementById('txt0').focus();
If you have dynamic fields you cand add a dynamic id. Example:
{arrayItems.map((item, index) => {
<TextField
id={'txt' + index}
onKeyUp={(event) => {
if (event.key == 'ArrowDown') {
document.getElementById(`txt`+(index+1)).focus();
}
if (event.key == 'ArrowUp' && index > 0) {
document.getElementById(`txt`+(index-1)).focus();
}
}}
/>
}
本文标签： javascriptHow to focus the next input with ReactStack Overflow
版权声明：本文标题：javascript - How to focus the next input with React - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738562281a2099466.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论