如何使用 Formik + 是的验证列表框（选择）- Headless UI？

Question

我正在使用 Listbox (Select) - Headless UI with Formik，如何使用 Formik 和 Yup 验证此下拉列表？

示例：https://codesandbox.io/s/vigorous-dream-irfj3e?file=/src/App.js

我希望您在我上面修复的代码上显示该组件的验证选项之一。

代码：

import { useState } from "react";
import { Listbox } from "@headlessui/react";

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

const MyListbox = ({ defaultValue }) => {
  const [selectedPerson, setSelectedPerson] = useState({
    id: -1,
    name: defaultValue,
    unavailable: false
  });

  return (
    <Listbox value={selectedPerson} onChange={setSelectedPerson}>
      <Listbox.Button>{selectedPerson.name}</Listbox.Button>
      <Listbox.Options>
        {people.map((person) => (
          <Listbox.Option
            key={person.id}
            value={person}
            disabled={person.unavailable}
          >
            {person.name}
          </Listbox.Option>
        ))}
      </Listbox.Options>
    </Listbox>
  );
};

export default MyListbox;

Answer 1

只是想知道您是否能够找到解决方案。即使我尝试在 Vue 3 或 Nuxt 3 应用程序中向 ListBox 添加验证。如果有请提供一些参考。