너의 반응 형식을 뽑아라

선결 조건
이 글은 당신이 ReactJS와 React 갈고리의 기본 지식에 대해 잘 알고 있다고 가정해 보세요. 예를 들어 useState입니다.
우리는 작은 CSS를 작성하고 안내를 이용할 것이기 때문에 스타일은 여기에 상세하게 소개하지 않을 것입니다.마음대로
이 안내서의 반응 부분에는 영향을 주지 않으므로 원하는 CSS 프레임 또는 스타일을 사용합니다.

문제.
프로필에서 암시한 바와 같이 형식은 반응 중에 매우 복잡할 수 있다.우리는 많은 브라우저의 기본 기능을 잃었다. 예를 들어 폼 검증과 오류 보고서 등이다. 이로 인해 많은 사람들이 대량의 템플릿 파일을 작성하게 될 것이다.
문제는 일반적으로 세 가지로 나뉜다.

확인
만약 상기 내장된 브라우저 기능이 없다면, 우리는 아주 간단한 검사와 균형을 맞추기 위해 대량의 코드를 작성할 수 있을 뿐이다. 예를 들어, 폼이 채워졌거나, 전자 우편 주소가 유효한 패턴과 일치하는지 확인할 수 있다.
이것은 통상적으로 일련의 조건을 초래할 수 있으며, 통상적으로 끼워 넣는 조건으로 인해 표 상태의 관리를 더욱 복잡하게 한다.

데이터 처리
사용자가 제출한 후, 제출 처리 프로그램의 데이터에 접근해야 합니다. 그렇습니까?일반적으로 두 가지 형태가 있습니다.

은 모든 요소에 인용을 분배한 다음에 이 인용을 통해 데이터에 접근하면 함수 맨 위에 대량의 인용을 만들어서 나중에 사용할 수 있도록 해야 한다.

에서 제어된 구성 요소를 만듭니다. 입력한 값은 상태에서 파생되며, 키마다 입력한 상태를 업데이트합니다. 이것은 대량의useState 호출이나 하나의JavaScript 대상이 필요합니다. 잦은 복제 상태가 있어야만 변경할 때 하나의 항목을 업데이트할 수 있습니다.

오류 처리
버그 검증이 있으면 버그 버그 보고가 있습니다. 이런 상황에서 여러 상태에서 오류 메시지를 전환하거나 더 복잡한 방법 (예를 들어DOM에 비추어야 하는 일련의 오류) 은 적지 않습니다.모든 오류/검증 규칙에 대해 이것은 통상적으로 완전히 수동적이고 수동으로 처리된다.

솔루션
몇 개의 도서관은 이 문제를 해결하여 표를 더욱 쉽게 방문할 수 있도록 하기 위해서이다.우리는 최근에 내가 발견하고 사랑한 react-hook-form을 주목할 것이다. 그러나 또 다른 유행 옵션은 Formik이다.
이 라이브러리들은 이러한 흔한 문제들을 내재화하고, React에서 폼을 구축하는 보다 성명적인 방법을 제공하려고 한다.

개시하다
이 항목은 스타일 설정을 단순화하기 위해create react 응용 프로그램과 안내 CSS를 사용하여 안내합니다.create react 응용 프로그램을 사용하지 않을 경우 단일 기본 응용 프로그램 기능을 사용하여 템플릿 파일을 로컬에서 쉽게 사용하거나 CodePen 또는 CodeSandbox 등의 온라인 설정에서 사용할 수 있습니다.
프로젝트 작성부터 시작하겠습니다.

$ npx create-react-app hookify-form-example
$ cd hookify-form-example

App.css 파일 또는 로고 파일이 더 이상 필요하지 않으므로 App.js의 내용을 다음 코드로 대체합니다.

import React from "react";

function App() {
  return <div className="App"></div>;
}

export default App;

우리는 index.css을 우리의 index.js 파일에 불러오기를 희망합니다. 왜냐하면 우리는 그것을 이용하여 맞춤형 CSS를 진행할 것입니다.

부트 설치 및 설정
다음은 CSS를 작성하는 데 시간이 많이 걸리지 않는 상황에서 유쾌한 것들을 볼 수 있기를 바랍니다. 따라서 이 문제들을 처리하기 위해 가이드 프레임워크를 설치할 것입니다.

# Yarn
$ yarn add bootstrap

# NPM
$ npm install bootstrap --save

다음은 App.js 파일의 맨 위에 가이드 가져오기를 추가합니다.

import "bootstrap/dist/css/bootstrap.min.css";

기본 스타일
프로젝트 루트 디렉토리에서 index.css 파일을 열고 내용을 다음 CSS로 바꿉니다.

html,
body,
#root {
  height: 100%;
}

body {
  background-color: grey;
}

#root {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: #4b79a1;
  background: -webkit-linear-gradient(to bottom, #283e51, #4b79a1);
  background: linear-gradient(to bottom, #283e51, #4b79a1);
}

요컨대, 이것은 uiGradients이 제공하는 아름다운 점차적인 배경을 제공하고, 우리의 내용을 페이지의 절대적인 중심에 집중시킬 것이다.

기본 형식
다음 단계에서 우리는 기본적인 로그인 폼을 구축할 것이다.기본 부트 양식 예제를 사용하여 App.js의 응용 프로그램 기능을 다음 코드로 교체할 수 있습니다.

function App() {
  return (
    <>
      <div className="card" style={{ width: "18rem" }}>
        <div className="card-body">
          <h5 className="card-title">Login</h5>
          <form>
            <div className="form-group">
              <label for="email">Email address</label>
              <input
                type="email"
                className="form-control"
                name="email"
                placeholder="Enter email"
              />
            </div>
            <div className="form-group">
              <label for="password">Password</label>
              <input
                type="password"
                className="form-control"
                name="password"
                placeholder="Password"
              />
            </div>
            <button type="submit" className="btn btn-primary">
              Submit
            </button>
          </form>
        </div>
      </div>
    </>
  );
}

계속해서 파일 상단에 유효한 사용자 이름과 비밀번호를 포함하는 대상을 추가합니다.이것은 생산 프로그램에서 인증을 처리하고자 하는 방식이 아닙니다.우리가 이렇게 하는 것은 단지 표 제출에 대해 간단한 검사와 응답 처리를 허용하기 위해서이다.

const loginInfo = {
  username: "[email protected]",
  password: "testtest"
};

갈고리 틀을 설치하다.
이전에 React에서 폼을 구축한 적이 있다면, 문제가 있을 수 있습니다.우리는 어떻게 마법을 발생시킬 것인가?버그 보고와 검증은 어떻게 작동합니까?마지막으로 react hook form을 설치하는 것부터 시작합니다.

# Yarn
yarn add react-hook-form

# NPM
$ npm install react-hook-form --save

그리고 우리는 useForm 갈고리를 react-hook-form에서 App.js 파일로 가져올 수 있다.

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

다음 단계에서 우리는 우리의 갈고리와 구조 함수를 호출할 것이다. 우리는 우리의 형식에 힘을 부여해야 한다.되돌아오는 문장 위의 App 함수에 다음과 같은 내용을 추가합니다.

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

const onSubmit = data => {
  console.log(data);
};

우리는 갈고리에서 다음과 같은 세 가지를 꺼냈다.

레지스터 - 입력마다 두 개의 인용을 등록하고 검증 규칙을 적용합니다.이 내용은 나중에 자세히 설명합니다.

handle Submit - 위의 onSubmit 함수를 포장하고 각 양식에

을 입력하여 요청한 데이터를 전송하는 고급 함수

오류 - 등록 유효성 검사에 기반한 모든 오류를 포함하는 객체 - 오류 보고서를 처리하는 데 사용됩니다.

등록 양식 입력
만약 폼 입력에서 인용을 사용한 적이 있다면, 아래의 내용은 매우 익숙한 것 같습니다.이런 방법의 주요 차이점은 두 가지 매우 큰 결점을 피하는 것이다. 나는 이런 방법을 좋아한다. 너도 이렇게 하기를 바란다.

모든 입력에 유일한 인용을 만들 필요가 없습니다. 즉, React.createRef. 레지스터 함수는 모든 폼에

을 입력하는 데 다시 사용되기 때문입니다.

모든 인용을 수동으로 터치해서 입력 값을 읽을 필요가 없습니다. 라이브러리가 백엔드에서 이 값을 처리하기 때문입니다.

우리는 현재 입력마다 register을 가리키는 인용을 추가해야 한다.

<form>
  <div className="form-group">
    <label for="email">Email address</label>
    <input
      type="email"
      className="form-control"
      name="email"
      placeholder="Enter email"
      ref={register({ required: true })}
    />
  </div>
  <div className="form-group">
    <label for="password">Password</label>
    <input
      type="password"
      className="form-control"
      name="password"
      placeholder="Password"
      ref={register({ required: true })}
    />
  </div>
  <button type="submit" className="btn btn-primary">
    Submit
  </button>
</form>

우리 빠르게 깊이 파고들자.register 함수는 입력 값을 감시하는 방법뿐만 아니라 사용할 수 있는 폼 검증을 등록하는 방법도 제공한다.이런 상황에서 우리는 단지 필요에 따라 그것들을 표시할 뿐이다.react-hook-form은 모드, 최대 길이 또는 최소 길이와 같은 모든 이전 HTML5 유효성 검사 규칙을 지원합니다.너는 온전한 목록 here을 찾을 수 있다.
다음 단계는 제출 함수를 라이브러리에서 제공하는 handleSubmit 함수에 포장하여 표에 추가하는 것입니다.응용 프로그램 기능에서 열려 있는 <form>을 다음과 같이 바꿉니다.

<form onSubmit={handleSubmit(onSubmit)}>

무결성 검사
우리는 같은 작은 부분의 코드를 한 번 또 한 번 수정했다. 이것은 텍스트 강좌에서 사람을 좀 곤혹스럽게 할 수 있다. 이성적으로 볼 때 우리의 응용 프로그램 기능이 현재 이렇다는 것을 검증하는 데 시간이 좀 걸릴 것이다.

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

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <>
      <div className="card" style={{ width: "18rem" }}>
        <div className="card-body">
          <h5 className="card-title">Login</h5>
          <form onSubmit={handleSubmit(onSubmit)}>
            <div className="form-group">
              <label for="email">Email address</label>
              <input
                type="email"
                className="form-control"
                name="email"
                placeholder="Enter email"
                ref={register({ required: true })}
              />
            </div>
            <div className="form-group">
              <label for="password">Password</label>
              <input
                type="password"
                className="form-control"
                name="password"
                placeholder="Password"
                ref={register({ required: true })}
              />
            </div>
            <button type="submit" className="btn btn-primary">
              Submit
            </button>
          </form>
        </div>
      </div>
    </>
  );
}

이 때 필드를 채우고 제출하면 다음 내용이 콘솔에 기록되어 있는 것을 볼 수 있습니다.

Object { email: "[email protected]", password: "test" }

오류 처리
이제 errors의 대상을 다시 한 번 살펴보겠습니다. 이것은 최초의 useForm 호출에서 만들어진 것이며, 표에 오류 처리를 추가했습니다.
코드에 반영되었지만 명확하게 언급되지 않은 것은 모든 폼의 입력은 반드시 하나의 이름이 있어야 한다는 것이다.이 점은 오류가 발생했는지 확인하기 위해 errors 대상을 검사하는 것이 중요하기 때문이다.현재, 우리는 모든 입력 아래에 작은 오류 보고 검사를 추가하여, 폼이 채워지지 않았는지 반영할 것입니다.
따라서 errors.email 속성을 예로 들면 이메일이라는 필드와 관련된 오류가 있는지 알 수 있다. 비밀번호 필드와 errors.password도 마찬가지다.
이제 전자 메일 입력에 다음 코드를 추가합니다.

{errors.email && (
  <div className="text-danger">Email is a required field</div>)}
)}

비밀번호를 입력하십시오:

{errors.password && (
  <div className="text-danger">Password is a required field</div>)}
)}

공백 폼을 제출해 보십시오. 잘못된 메시지를 볼 수 있을 것입니다.
이제 마지막 체크포인트인 App 함수는 다음과 같습니다.

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

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <>
      <div className="card" style={{ width: "18rem" }}>
        <div className="card-body">
          <h5 className="card-title">Login</h5>
          <form onSubmit={handleSubmit(onSubmit)}>
            <div className="form-group">
              <label for="email">Email address</label>
              <input
                type="email"
                className="form-control"
                name="email"
                placeholder="Enter email"
                ref={register({ required: true })}
              />
              {errors.email && (
                <div className="text-danger">Email is a required field</div>
              )}
            </div>
            <div className="form-group">
              <label for="password">Password</label>
              <input
                type="password"
                className="form-control"
                name="password"
                placeholder="Password"
                ref={register({ required: true })}
              />
              {errors.password && (
                <div className="text-danger">Password is a required field</div>
              )}
            </div>
            <button type="submit" className="btn btn-primary">
              Submit
            </button>
          </form>
        </div>
      </div>
    </>
  );
}

양식 프로세서
우리는 이 아주 간단하게 유지할 것이며, 이전의 정보에 근거하여 경보 메시지를 표시할 것이다.onSubmit 함수 중 App 함수를 다음과 같이 바꿉니다.

const onSubmit = data => {
  if (
    data.email === loginInfo.username &&
    data.password === loginInfo.password
  ) {
    alert("Logged in successfully");
  } else {
    alert("Invalid username or password");
  }
};

소스 코드
이 강좌의 전체 소스 코드는 Github에서 찾을 수 있습니다.

결론
나처럼 react-hook-form을 좋아했으면 좋겠어.이것은 매우 좋은 도서관으로 간단한 형식도 구축할 수 있고 복잡한 형식도 구축할 수 있으며 필요한 견본과 의식의 수량을 최대한 줄일 수 있다.질문이나 의견이 있으면 저희에게 연락 주세요.