Javascript/React

[React] 탭 눌렀을 때 다른 곳으로 이동하는 방법

eulBlue 2024. 4. 25. 15:36

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^4.9.5"

댓글쓰는 창을 만들고 있는데 입력 창에서 탭 눌렀을 때

버튼으로 이동됐으면 좋겠다고 했어서 Ref 로 해결하려고 했더니

focus 를 줘도 안돼더라 .. 그래서 이거어떻게해야하는거여 .. 싶어서

못하겠다 싶었는데 tabIndex 를 이용해서 할 수 있더라 ?

<AddReplyComment
    tabIndex={0}
    onKeyDown={(e) => {
    	if (e.key === "Enter") {
    		onSubComment(v.article_id, i);
    	}
    	}}
    onClick={async () => {
    	onSubComment(v.article_id, i);
    }}
    >
    댓글남기기
</AddReplyComment>

이런식으로 tabIndex 에 숫자를 넣으면 Tab 을 눌렀을 때 순차적으로 선택될 수 있도록 할 수 있다고 한다.

Textarea 에서 Tap -> 댓글남기기 버튼으로 포커스 이동