React Hook Form 사용

개발된 프로젝트 중'리액트훅 폼으로 설치해달라'는 말에 만질 기회가 있었는데, 초보자의 생각대로 한 것이어서 여러 번 이해했고, 불필요함을 위해 초간단 문서를 작성했다.

React Hook Form

https://react-hook-form.com/

특징.

onChange 를 실행하지 않고도 강력한 성능 제공

submit에서 input과select의value

줍기
그렇게 지도 모른다, 아마, 아마...

install

npm

npm install react-hook-form

yarn

yarn add react-hook-form

상용

정부에서 가져온 샘플을 설명해 주세요.

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

export default function App() {
  const { register, handleSubmit, watch, errors } = useForm()
  const onSubmit = data => console.log(data)

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    {/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}
    <form onSubmit={handleSubmit(onSubmit)}>
    {/* register your input into the hook by invoking the "register" function */}
      <input name="example" defaultValue="test" ref={register} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input name="exampleRequired" ref={register({ required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}

useForm 모니터링

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

필요한 물건을 나누어 대입하여 사용하다

const { register, handleSubmit, watch, errors } = useForm()최저register와handleSubmit 필요합니까

감시 대상의register 설정

<input name="example" defaultValue="test" ref={register} /> register의ref 속성 감시
register는 다음과 같이 대상을 매개 변수에 전달하여 유효성을 설정할 수 있습니다ref={register({ required: true })}기타 자세한 설정은 여기를 참조하세요↓
https://react-hook-form.com/jp/api#register

전송 설정

<form onSubmit={handleSubmit(onSubmit)}>form 태그에 대한 onSubmit 속성 설정handleSubmit().창을 매개 변수에 보내는 함수 전달
이번 실행const onSubmit = data => console.log(data)메커니즘은ref에서register의 요소의value를 설정하고 그 요소의name는 속성이 되며 데이터는 대상으로 교부된다.
이번이라면,data = {example: "入力されたvalue",exampleRequired: "入力されたvalue"}의 경우

오류 확인

register에 대한 잘못은,const { register, handleSubmit, watch, errors } = useForm()구문을 사용합니다.errors면 불러도 돼요.

외부 라이브러리 사용 방법

그렇다면 편리한 hookForm, Material-II 등 도구와 공존하면 정상적으로 작동하지 못해 곤란하다.
여기를 잘 모르면 "Material-II와 공존할 수 없잖아 www는 사용할 의미가 없지? www"라고 불린다.
제어할 수 없는 경우 Controller 구성 요소를 사용하여 제어
제어할 수 없을 때ref 속성을 설정할 수 없습니다.

Controller 모니터링

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

물론 useForm도 잊지 마세요.

미리 정의된 control

이런 느낌 아래 일반적인 사용 외에 Controller 구성 요소와 control도 준비해야 한다.

외부 라이브러리 구성 요소의 쓰기 제어

이번 샘플은 모두가 좋아하는 Material UI입니다.

const { handleSubmit, register, errors, control } = useForm();

대상 속성으로 설정한name 속성errors.exampleRequired아까 정의된 control 속성도 이런 느낌으로.name="gender"그리고 컨트롤하고 싶은 구성 요소를 as에 넣으세요.
이번에는 MaterialUI의 무선 버튼입니다.
또한 이 Controller 구성 요소를 사용하면 register를 사용하지 않습니다. 어떻게 해야 합니까?되다이 경우 rules 속성을 사용합니다.여기 문서를 제대로 읽지 않아서 막혔어요😣control={control}이렇게 하시면 됩니다.

결점

Type Script에 맞지 않음(가능)
안 해봤는데 잘 모르겠어요.🤤