react-hook-form 이벤트 등록, input값 얻기

react-hook-form을 다루면서 마주했던 오류를 기록하는 회고록이다.

 

CSS는 styled-components를 사용했다.

<Input
    	onChange={onChangeHandler}
            type="text"
            {...register("id", {
              required: true,
              pattern: /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/i,
            })}
            aria-invalid={errors.id ? "true" : "false"}
            placeholder="이메일을 입력해주세요."
/>

 

Input컴포넌트에서 onChange이벤트를 등록하고 싶었다.

그래서 onChange이벤트를 넣어줬는데 동작하지않는 상황에 직면하였다.

 

 

구글링으로 찾아보니 react-hook-form만의 사용방법이 따로 존재하였다.

 

해결방법은 간단하다.

<Input
    	onChange={onChangeHandler}
            type="text"
            {...register("id", {
              required: true,
              pattern: /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/i,
              onChange: (e) => onChangeHandler(e),
            })}
            aria-invalid={errors.id ? "true" : "false"}
            placeholder="이메일을 입력해주세요."
/>

 

register함수 옵션안에 이벤트를 등록해주었더니 해결되었다.

 

 

 

참고링크 : https://velog.io/@rlorxl/react-hook-form-%EA%B4%80%EB%A0%A8-%EC%9D%B4%EC%8A%88