[React] react-hook-form | Textarea에서 Enter로 submit 하기

input vs textarea

• input은 Enter를 누르면 자동으로 제출된다.
• textarea는 Enter를 Shift+Enter로 줄바꿈을 할 수 있다.

나는 textarea를 이용하면서도 enter를 누르면 react-hook-form을 통해 submit을 발생시키고 enter+shift로 줄바꿈을 하고 싶었다.

onKeyPress

제출하려는 form에 onKeyPress옵션으로 pressEnter함수를 준다.

pressEnter 함수
: form에서 누른 키가 "Enter"면 form의 value를 useForm에서 갖는 value 형태의 data로 만들어주고 이 data를 handleSubmit으로 넘긴다.

const pressEnter=>(e)=>{
	if(e.key === "Enter"&& !e.shiftKey){
      e.preventDefault();
      const data = {payload: e.target.value};
      return handleSubmit(onValid(data));
    }
}

<form onKeyPress={pressEnter}>
	<textarea 
		ref={register({ required: true })}
    	name="payload"
	/>
</form>