Cara menggunakan daftar daripada borang react-hook-dengan Kotak Kombo UI Tanpa Kepala

Question

Saya mempunyai kod ini dan saya cuba menyambungkan komponen Combobox daripada Headless UI menggunakan react-hook-form. Setiap kali saya cuba memasukkan nilai yang berbeza dan memilih pilihan yang berbeza, saya mendapat mesej ralat - 无法读取未定义的属性（读取“名称”）

Saya mencuba pelbagai variasi tetapi tidak dapat kaedah Combobox 与 register 一起使用。任何帮助，将不胜感激。我想使用 register 来完成这项工作，并且不想使用其他 Controller 方法来执行 react-hook-form dengan betul.

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

Mungkin bukan idea yang baik untuk menambah terus react-hook-form 处理程序附加到 Combobox.

Keluarkan permintaan salinan dalam
1. Input > onChange 将为您提供一个带有字符串 target.value 的事件，而不是来自的 Location / User / ... 模型API。您会在 handleSubmit untuk "menyahzip"nya? Dan, jika ya, bagaimanakah anda mengendalikan ralat API di sana? !

2. Input mungkin berkaitan dengan Comboboxralat API peringkat. Anda mesti lebih berhati-hati untuk membezakan antara rentetan "kejayaan" dan "kegagalan" di peringkat komponen borang.

3. String tidak boleh dihuraikan pada peringkat komponen borang. Terutamanya dalam mod "Berbilang", anda boleh membentangkan maklumat agregat dalam input, seperti "3 item telah dipilih." Jika anda mahu register 扩展到 Combobox.Input, ini akan menjadi nilai anda.

4. Akhir sekali, dalam beberapa pelaksanaan lain (bukan HeadlessUI) Combobox, nilai akan mengekalkan input pengguna asal.

Contohnya:

1. Input pengguna: "United Airlines"
2. Pilih cadangan: "Amerika Syarikat", "United Kingdom"...
3. Pengguna memilih pilihan
4. Combobox 采用新值，但 Combobox.Input Mengambil nilai baharu, tetapi nilai Combobox.Input kekal "United"

Anda mungkin mahu menggunakan pendekatan mudah alih dan kalis masa hadapan.

---

Kesimpulannya adalah sama: biarkan Combobox 为您解析和转换值。将 onChange 提供给 Combobox，而不是 Combobox.Input menghuraikan dan menukar nilai untuk anda. Berikan onChange kepada dan bukannya Combobox.Input. Tetapi ini hanya boleh dilakukan dengan varian Terkawal

RHF API. 🎜