[REACT] React Hook Form - setValue 사용하기

학습일 : 2023. 04. 18

---

submit 이 정상적으로 되면 input 에 값을 비워주도록 할텐데

setValue를 사용해보자

---

<ToDoList.tsx>

useForm 작성해준 부분에 setValue도 추가시킨다음

onSubmit 함수에 setValue를 적어주면

정상적으로 submit이 된다면 string이 비워지게 될 것이다.

import { useForm } from "react-hook-form";

interface IForm {
  toDo: string;
}

function ToDoList() {
  const { register, handleSubmit, setValue } = useForm<IForm>();

  const onSubmit = (data: IForm) => {
    console.log("add to do", data.toDo);
    setValue("toDo", ""); // submit 되면 문자열이 비워짐
  };

  return (
    <div>
      {/* handleSubmit 함수를 사용할 때는
      첫번째 매개변수로 데이터가 유효할 때 호출되는 다른 함수를 받는다.
      두번째 매개변수로는 데이터가 유효하지 않을때 호출될 함수를 넣으면 된다.*/}
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register("toDo", {
            required: "please write a to do",
          })}
          placeholder="오늘 해야할 일을 입력하세요"
        />
        <button>추가</button>
      </form>
    </div>
  );
}

export default ToDoList;

 

 

실행결과

콘솔에는 적어준게 잘 찍혀나오고

제대로 submit이 되었기 때문에

적어준 것들이 비워짐