[Node.js] react-hook-form 활용

ref에 기능추가하기

// useRef
  const idRef = useRef<HTMLInputElement | null>(null);
  const { ref, ...rest } = register("id");

// 기능추가
  useEffect(() => {
    if (idRef.current !== null) {
      console.log(idRef.current)
    }
  }, [idRef]);
  
// Html
<input
  {...rest}
  name="id"
  ref={(e) => {
    ref(e);
    idRef.current = e;
  }}
/>

 

tab키 인식해서, 다음 input focus하기

// setFocus
const { register, setFocus, ...생략 } = useForm();

const handleOnKey = (e) => {
  if(e.key === "Tab"){
    // 기존 tab기능 제거
    e.preventDefault();
    // password input, focus하기
    setFocus("password");
  }
}
    

// HTML
return (
  <form ...생략>
    <input
      {...register("id")}
      onKeyDown={(e) => handleOnKey(e)}
    />
    <input
      {...register("password")}
    />
    ...생략
  </form>
)