如何将react-hook-forms中的寄存器与Headless UI Combobox一起使用
P粉449281068
P粉449281068 2024-01-16 11:09:40
0
1
542

我有这段代码,我正在尝试使用react-hook-form从Headless UI连接Combobox组件。每当我尝试输入不同的值并选择不同的选项时,都会出现错误消息 - 无法读取未定义的属性(读取“名称”)

我尝试了很多不同的变体,但无法将 Comboboxregister 一起使用。任何帮助,将不胜感激。我想使用 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>
  );
}


P粉449281068
P粉449281068

全部回复(1)
P粉034571623

直接将 react-hook-form 处理程序附加到 Combobox 可能不是一个好主意。

  1. Input > onChange 将为您提供一个带有字符串 target.value 的事件,而不是来自的 Location / User / ... 模型API。您会在 handleSubmit 中发出复制请求来“解压”它吗?而且,如果是这样,您将如何处理 API 错误那里?!
  1. 输入可能与Combobox级别的API错误相关。您必须格外小心地在表单组件级别区分“成功”和“失败”字符串。

  2. 字符串在表单组件级别可能无法解析。特别是在“多个”模式下,您可以在输入中呈现聚合信息,例如“选择了 3 个项目”。如果您将 register 扩展到 Combobox.Input,这将是您的值。

  3. 最后,在其他一些(非 HeadlessUI)Combobox 实现中,该值将保留原始用户输入。

例如:

  1. 用户输入:“联合航空”
  2. 选择建议:“美国”、“英国”...
  3. 用户选择某个选项
  4. Combobox 采用新值,但 Combobox.Input 值仍保留“United”

您可能希望坚持采用便携且面向未来的方法。


结论是相同的:让 Combobox 为您解析和转换值。将 onChange 提供给 Combobox,而不是 Combobox.Input。但这只有通过受控 RHF API 变体才能实现。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板