Enter시 초점 이동, 함수 실행

 

 

CRUD란?

 

👆이전 코드를 사용하여 코드 보완

 

+ 추가할 때 엔터시 가능, 이름 필드에서 엔터시 생일 필드로 초점 이동

import { useRef } from "react";

// 포커스 이동
const nameRef = useRef<HTMLInputElement>(null);
const birthRef = useRef<HTMLInputElement>(null);


<label htmlFor="inpName">이름</label>
<input
    type="text"
    id="inpName"
    placeholder="이름을 입력하세요"
    ref={nameRef}
    value={newName}
    onChange={e => setNewName(e.target.value)}
    onKeyDown={e => {
        if(e.key === "Enter") birthRef.current?.focus();
    }}
/>
<br />
<label htmlFor="inpBirth">생일</label>
<input
    type="text"
    id="inpBirth"
    placeholder="ex) 2000.01.01"
    ref={birthRef}
    value={newBirth}
    onChange={e => setNewBirth(e.target.value)}
    onKeyDown={e => {
        if(e.key === "Enter") addUser(); // 엔터시 추가 함수 호출
	}}
/>

 

 

💻 input에 ref 속성과 onKeyDown 속성 추가

 

const birthRef = useRef(null); 라고 써도 되지만 타입스크립트이기 때문에

const birthRef = useRef<HTMLInputElement>(null); 타입을 써준다.