Headless UI Combobox를 사용하여 반응 후크 양식의 레지스터를 사용하는 방법

Question

이 코드가 있고 React-hook-form을 사용하여 Headless UI에서 Combobox 구성 요소를 연결하려고 합니다. 다른 값을 입력하고 다른 옵션을 선택하려고 할 때마다 오류 메시지가 나타납니다. 无法读取未定义的属性（读取“名称”）

다양한 변형을 시도했지만 Combobox 与 register 一起使用。任何帮助，将不胜感激。我想使用 register 来完成这项工作，并且不想使用其他 Controller 方法来执行 react-hook-form방법을 제대로 찾을 수 없었습니다.

으아아아

Answer 1

직접 추가하는 것은 아마도 좋은 생각이 아닐 것입니다react-hook-form 处理程序附加到 Combobox.

1. Input > onChange 将为您提供一个带有字符串 target.value 的事件，而不是来自的 Location / User / ... 模型API。您会在 handleSubmit에서 복사 요청을 발행하여 "압축 해제"하시겠습니까? 그렇다면 여기에서 API 오류를 어떻게 처리하나요? !

2. 입력이 Combobox레벨 API 오류와 관련될 수 있습니다. 양식 구성 요소 수준에서 "성공" 문자열과 "실패" 문자열을 구별하는 데 특히 주의해야 합니다.

3. 문자열은 양식 구성 요소 수준에서 구문 분석되지 않을 수 있습니다. 특히 '다중' 모드에서는 '3개 항목이 선택되었습니다.' 등 입력 시 집계된 정보를 표시할 수 있습니다. register 扩展到 Combobox.Input한다면 이것이 당신의 가치가 될 것입니다.

4. 마지막으로 다른(HeadlessUI가 아닌) Combobox 구현에서는 값이 원래 사용자 입력을 유지합니다.

예:

1. 사용자 입력: "United Airlines"
2. 제안 선택: "미국", "영국"...
3. 사용자가 옵션을 선택합니다
4. Combobox 采用新值，但 Combobox.Input 새 값을 사용하지만 Combobox.Input 값은 "United"로 유지됩니다.

휴대 가능하고 미래 지향적인 접근 방식을 고수하고 싶을 수도 있습니다.

---

결론은 같습니다. Combobox 为您解析和转换值。将 onChange 提供给 Combobox，而不是 Combobox.Input 값을 구문 분석하고 변환해 보겠습니다. Combobox.Input 대신 onChange를 에 제공하세요. 그러나 이는 Controlled

RHF API 변형에서만 가능합니다. 🎜