如何將react-hook-forms中的暫存器與Headless UI Combobox一起使用

Question

我有這段程式碼，我正在嘗試使用react-hook-form從Headless UI連接Combobox元件。每當我嘗試輸入不同的值並選擇不同的選項時，都會出現錯誤訊息 - 無法讀取未定義的屬性（讀取「名稱」）

我嘗試了很多不同的變體，但無法將 Combobox 與 register 一起使用。任何幫助，將不勝感激。我想使用 register 來完成這項工作，並且不想使用其他 Controller 方法來執行 react-hook-form 的方法。

import React from "react";

import { useState } from "react";
import { Combobox } from "@headlessui/react";
import { useForm } from "react-hook-form";

const people = [
  { id: 1, name: "Durward Reynolds" },
  { id: 2, name: "Kenton Towne" },
  { id: 3, name: "Therese Wunsch" },
  { id: 4, name: "Benedict Kessler" },
  { id: 5, name: "Katelyn Rohan" },
];

function Example() {
  const [query, setQuery] = useState("");

  const filteredPeople =
    query === ""
      ? people
      : people.filter((person) => {
          return person.name.toLowerCase().includes(query.toLowerCase());
        });

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

  const submit = (data) => {
    console.log(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(submit)}>
      <Combobox
        as="div"
        name="assignee"
        defaultValue={people[0]}
        {...register("assignee")}
      >
        <Combobox.Input
          onChange={(event) => setQuery(event.target.value)}
          displayValue={(person) => person.name}
        />
        <Combobox.Options>
          {filteredPeople.map((person) => (
            <Combobox.Option key={person.id} value={person}>
              {person.name}
            </Combobox.Option>
          ))}
        </Combobox.Options>
      </Combobox>
      <button>Submit</button>
    </form>
  );
}

export default function check() {
  return (
    <div>
      <Example />
    </div>
  );
}

#

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. 使用者輸入：「聯合航空」
2. 選擇建議：「美國」、「英國」...
3. 使用者選擇某個選項
4. Combobox 採用新值，但 Combobox.Input 值仍保留「United」

您可能希望堅持採用便攜且面向未來的方法。

---

結論是相同的：讓 Combobox 為您解析和轉換值。將 onChange 提供給 Combobox，而不是 Combobox.Input。但這只有透過受控 RHF API 變體才能實現。