[React Hook Formv7] 스냅 구조로 가시를 간단하게 구현합니다.

개인 개발 과정에서 사용자 정보 로그인 화면을 만드는 과정에서 진행 상황을 나타내는 마법사(MUI와 같은 Stepper)를 제작할 때 중첩된 구조로 검증해야 하기 때문에 메모로 남는다.
MUI v5와 React Hook Formv7의 도입에 관하여 아래의 글은 매우 통속적이고 알기 쉽게 요약하였다.이 기사도 이 기사에 기재된 코드에 따라 제작되었다.꼭 참고하세요.
이번에는 다음과 같은 상황에서 유효기간을 간단하게 실시해 봅시다.
App.tsx

 <Stack spacing={3}>
     // ネスト化されたコンポーネントにおいても簡単にバリデーションを実装したい
     <EmailInput />
     <NameInput />
     <PasswordTInput />
     <Button
       color="primary"
       variant="contained"
       size="large"
       onClick={handleSubmit(onSubmit)}
     >
       作成
     </Button>
 </Stack>

메서드useFormContext 사용(이 전용)
이 사용자 정의 스크립트를 사용하면 창의 상하문에 접근할 수 있습니다.useFormContext는 깊이 박힌 구조체에서 사용하고 상하문을 프로파일로 상대방에게 전달하는 것이 번거로운 상황에서 사용하고자 합니다. -React Hook Form
그러나 기능을 정확하게 발휘하기 위해서는 상기 코드FormProvider 구성 요소 패키지를 사용해야 하기 때문에 수정된 코드 형식은 다음과 같다.
App.tsx

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

// フォームの型
export interface FormInputState {
  ・・・・
}

// バリデーションルール
export const schema = yup.object({
  email: yup
    .string()
    .required("必須内容です")
    .email("正しいメールアドレスを入力して下さい"),
  ・・・・
});


export default function App() {
  
　// FormProviderはすべてのuseFormメソッドを必要とするため、
  // 変数metohdsにuseFormメソッドを値をして渡した後に、オブジェクトの分割代入をしています。
  const methods = useForm<StateFormInput>({
    resolver: yupResolver(schema),
  });
  const { handleSubmit } = methods;

  // フォーム送信時の処理
  const onSubmit: SubmitHandler<SampleFormInput> = (data) => {
    console.log(data);
  };

  return (
    <FormProvider {...methods} > 
　　　 <Stack spacing={3}>
        <EmailInput />
        <NameInput />
        <PasswordTInput />
        <Button
          color="primary"
          variant="contained"
          size="large"
          onClick={handleSubmit(onSubmit)}
        >
          登録
        </Button>
      </Stack>      
    </FormProvider>
  );
}

그 밖에 플러그인 구성 요소의 코드는 다음과 같다.
NameInput 구성 요소와 PasswordInput 구성 요소도 마찬가지로 생성됩니다.
EmailInput.tsx

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

export default function EmailInput() {
    const {
    register,
    formState: { errors },
  } = useFormContext();

  return (
    <>
      <TextField
        required
        label="Email"
        type="email"
        {...register("email")}
        error={"email" in errors}
        helperText={errors.email?.message}
      />
    </>
  );
}

동작 확인
표의 발송에 문제가 없습니다.

검증도 문제 없어요.

결론
끼워 넣은 구조도 몇 줄만 검증했다.
아이고~ React Hook Form이 편하네요.
그러나 "다른 용도로도 사용하고 싶은 구성 요소라면 검증된 논리만 분리해서 사용할 수 없나요?"이런 의문이 쏟아졌다.
아래의 보도는 이 의문에 대해 매우 큰 참고 가치가 있다.정말 고마워요.
이런 내용을 무료로 읽을 수 있다는 것은 정말 편리한 사회이다