react-hook-form에서 값을 확인하려면 watch를 사용할 수 있습니다.

도전

아래의 gif와 같이 첫 번째 질문에 따라 두 번째 마이그레이션 질문 내용을 변경하는 폼을 구현하고 싶을 때 어떻게 하면 좋은지 몇 시간을 소비했으므로 해결 방법을 남겨 둡니다.



첫 번째 질문만 변경시 setState로 관리하면 됩니다만, react-hook-form을 사용하면 onChange 이벤트가 중복되어 버리는 & 같은 값을 여러 개소에서 관리하게 되어 버리기 때문에 react -hook-form 측에서 관리하는 방법이 있는지 조사하고 있었다는 것이 이번 배경입니다.

결론

제목으로 말하고 있습니다. watch 을 사용합니다.
watch에서는 이름 그대로, 지정된 입력을 감시해 그 값을 돌려줍니다.

아래에서는 문서에 작성된 샘플을 설명합니다.

sample.tsx

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

interface IFormInputs {
  name: string
  showAge: boolean
  age: number
}

function App() {
  const { register, watch, formState: { errors }, handleSubmit } = useForm<IFormInputs>();
  const watchShowAge = watch("showAge", false); // you can supply default value as second argument
  const watchAllFields = watch(); // when pass nothing as argument, you are watching everything
  const watchFields = watch(["showAge", "age"]); // you can also target specific fields by their names

  // Callback version of watch.  It's your responsibility to unsubscribe when done.
  React.useEffect(() => {
    const subscription = watch((value, { name, type }) => console.log(value, name, type));
    return () => subscription.unsubscribe();
  }, [watch]);

  const onSubmit = (data: IFormInputs) => console.log(data);

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("name", { required: true, maxLength: 50 })} />
        <input type="checkbox" {...register("showAge")} />
        {/* based on yes selection to display Age Input*/}
        {watchShowAge && (
          <input type="number" {...register("age", { min: 50 })} />
        )}
        <input type="submit" />
      </form>
    </>
  );
}

샘플 코드

과제로 올린 동영상의 샘플 코드는 이쪽
htps : // 기 st. 기주 b. 코 m / 무스케 / 726638070c94 에어 d6 779 037267 d94

감상

getValues 로 할 수 없는가라고 조사하고 있었는데 우연히 watch쪽을 보았으므로 확실히 등대 아래 어둠이라고 하는 기분이었습니다.
영어 문서에 대한 서투른 의식이 조금 남아 있기 때문에 겁없이 읽어 가려고 생각합니다.

참고 기사

react-hook-form/watch