반응 후크 형식을 배우게 됩니다.
React에서 양식을 시작하는 가장 좋은 방법!
특히 모양이 큰 경우에 좋습니다.
이거 안 쓰면
양식을 만들 때도 유효성을 검사해야 합니다.
오류를 제한하고 표시하려면 별도의 오류 상태를 생성해야 합니다. 다시 수정하면 다시 설정해야 합니다.
그러나 로그인에 입력이 필요하다고 생각되면
너무 많은 상태 및 데이터 검증이 필요합니다.
매우 번거로운 작업입니다.
그래서 반응 후크 형식을 사용하겠습니다.
설치
npm install react-hook-form
그리고 useForm이라는 후크를 가져와야 합니다.
아래의 모든 코드를 주석 처리하십시오.
이제 우리는 또 다른 todoList 컴포넌트를 생성할 것입니다.
그러나 이벤트 속성은 필요하지 않습니다!
이제 useForm 후크를 사용합니다.
useForm은 많은 것을 제공합니다.
그중 Register라는 기능이 있습니다.
=> 그는 모든 것을 할 것입니다!! 이것만 있으면 onChange 이벤트 핸들러, 소품 등이 필요없다!!
? 나는 그것을 console.log하지만 설명은 나중에 나옵니다.
이 개체를 만듭니다.
나는 이것들 중 4개를 가지고 있다. 보시다시피 레지스터 함수에 일부 값을 전달해야 합니다.
onBlur는 onFocus의 반대입니다.
바깥쪽을 클릭했을 때.
레지스터 함수를 직접 호출하는 대신,
레지스터 함수가 반환하는 것은 무엇이든 입력으로 제공됩니다.
그런 식으로 반환하는 개체를 가져 와서 소품으로 입력에 전달합니다.
이 한 줄의 코드는 onChange 이벤트, 값 및 useState를 대체합니다.
-> 오류 메시지가 나오지는 않지만 어떻게 작동하는지 모르겠습니다.
register::watch에서 제공하는 다른 것을 시도해 보겠습니다.
watch는 양식 입력 값의 변화를 관찰하는 데 사용할 수 있는 기능입니다.
이것도 console.log(watch())
지금은 아무것도 없습니다.
하지만 값을 쓰기 시작하면
이렇게 받았다
toDo를 키와 값으로 받는 것을 볼 수 있습니다.
-> 양식의 가치를 추적할 수 있습니다.
이렇게 많은 입력에도
입력할 때 값을 얻으십시오!
엄청난 시간 절약!!