Comment utiliser les registres des formulaires de réaction avec Headless UI Combobox

Question

J'ai ce code et j'essaie de connecter le composant Combobox à partir de Headless UI à l'aide du formulaire de réaction-hook. Chaque fois que j'essaie de saisir différentes valeurs et de sélectionner différentes options, je reçois le message d'erreur : 无法读取未定义的属性（读取“名称”）

J'ai essayé beaucoup de variantes différentes, mais je n'ai pas réussi à trouver la bonne méthode 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

Ce n'est probablement pas une bonne idée d'ajouter directement react-hook-form 处理程序附加到 Combobox.

Faire une demande de copie dans
1. Input > onChange 将为您提供一个带有字符串 target.value 的事件，而不是来自的 Location / User / ... 模型API。您会在 handleSubmit pour le « décompresser » ? Et, si oui, comment gérez-vous les erreurs API là ? !

2. L'entrée peut être liée à des erreurs d'API Comboboxlevel. Vous devez faire très attention à faire la différence entre les chaînes de « réussite » et d’« échec » au niveau des composants du formulaire.

3. Les chaînes ne peuvent pas être analysées au niveau du composant de formulaire. Surtout en mode « Multiple », vous pouvez présenter des informations agrégées dans l'entrée, telles que « 3 éléments ont été sélectionnés ». Si vous le faisiez register 扩展到 Combobox.Input, ce serait votre valeur.

4. Enfin, dans certaines autres implémentations (non-HeadlessUI) Combobox, la valeur conservera la saisie utilisateur d'origine.

Par exemple :

1. Saisie de l'utilisateur : "United Airlines"
2. Sélectionnez les suggestions : "États-Unis", "Royaume-Uni"...
3. L'utilisateur sélectionne une option
4. Combobox 采用新值，但 Combobox.Input Prend la nouvelle valeur, mais la valeur Combobox.Input reste "United"

Vous souhaiterez peut-être vous en tenir à une approche portable et évolutive.

---

La conclusion est la même : laissez Combobox 为您解析和转换值。将 onChange 提供给 Combobox，而不是 Combobox.Input analyser et convertir les valeurs pour vous. Fournissez onChange à au lieu de Combobox.Input. Mais cela n’est possible qu’avec la variante API Controlled

RHF. 🎜