React-hook-form + chakra-ui + 모든 전화번호 라이브러리 (아마 결투 참조 문제일 것임)

Question

react-hook-form을 사용하여 useFormContext 패러다임을 통해 깊게 중첩되고 참조되는 일반 양식 구성 요소를 구축하여 구성 요소를 임의로 깊게 중첩할 수 있습니다. 스타일링에는 Chakra-UI를 사용했습니다. 이 모든 것이 잘 작동합니다. 그런데 일부 양식에 국제전화번호 입력 기능을 추가하고 싶습니다.

NextJS 컨텍스트에서 성능이 뛰어나고 RHF 및 Chakra와 함께 작동하는 한 어떤 라이브러리를 사용하는지 실제로 신경 쓰지 않으므로 아래와 완전히 다른 방향의 제안에 열려 있습니다.

리액트 국제전화 사용에 아주 가까워진 것 같아요.

내가 겪고 있는 문제(다른 라이브러리와 비슷하지만 약간 다른 문제가 있음)는 React-International-Phone이 Chakra 또는 React-Hook-Form과 잘 작동하지만 동시에 둘 다 작동하지 않는다는 것입니다.

Github 소스 코드에서 React-international-phone에는 다음과 같이 작동하는 Chakra-UI와 통합된 Storybook 예제가 있습니다.

으아악

React-Hook-Forms에서 Chakra Input컴포넌트를 사용한다면 다음과 같을 것입니다:

으아악

이 두 가지를 결합한 두 가지 이슈가 ...register 返回 ref 到 html 输入，而 React-international-phone 需要将 onChange 作为属性传递给其 usePhoneInput훅입니다.

첫 번째 질문에는 이 답변을 사용하여 실행할 수 있을 것 같습니다

으아악

그러나 불평phoneInput.inputRef 是一个对象而不是函数。事实上，文档说它是一个 React.RefObject<HTMLInputElement> ，这......我猜不是一个函数。但后来我不确定为什么 ref={phoneInput.inputRef}은 예제 코드에서 작동합니다.

react-hook-form register响应并将返回的onChange传递给usePhoneInputhook을 리팩토링하면 두 번째 문제를 해결할 수 있을 것 같습니다.

처음에는 이것을 시도했습니다

으아악

하지만 문제는 usePhoneInput가 Hook이므로 실제로 호출할 수 없다는 것입니다. 내 현재 위치는

으아악

충분히 가깝다고 느껴하지만 여전히 작동하지 않습니다. CodeSandbox에 넣었습니다. CodeSandbox가 손상되었습니다. App.js에서 양식에 대한 호출을 주석 처리했습니다. 주석을 제거하면 브라우저가 잠기기 때문입니다. :(

React-hook-form과 chakra-ui를 이 라이브러리나 다른 전화번호 라이브러리와 연결하는 방법에 대한 아이디어가 있나요?

Answer 1

@adsy의 댓글 팁으로 문제가 해결되었습니다.

컴포넌트에 useController 사용:

으아악

(및 구성 요소에서 ref에 대한 사소한 변경).

그런 다음 깊은 중첩을 요구할 때 구조도 분해하세요 control :

으아악