reactjs - 在使用 Headless UI "Listbox"(在内部管理自己的状态)的同时更新 Formik 状态

Question

我正在努力让 Headless UI Listbox 实现与 Formik 一起成功运行。在阅读了所有文档并搜索了 StackOverflow 之后，我还没有找到答案。

我可以让 Listbox 独立运行，并且 Formik 可以与其他不那么复杂(但仍然是自定义)的组件一起工作。也就是说，我无法让他们齐心协力。每当我更改 Select 组件中的选择时，我都可以成功更新 Headless UI 状态(只要它更新为正确的值)和 Formik 状态，但由于某种原因，active 和 selected 属性(在 Headless UI 中)无法正常工作(总是 假).

我假设我需要做的是使用 onChange 处理程序，以便它更新 both Headless UI 状态(到保持 active 和 selected 属性更新)和 Formik 值，但这似乎没有按预期工作。

有人有什么建议吗？请查看以下代码的最小表示:

export function TestForm() {
  return (
    <Formik
      initialValues={{ testing: {} }}
      onSubmit={ alert("Submitted"); }
    >
    <Form>
      <Select
        name="testing"
        items={[
          { id: 1, name: "Test 1" },
          { id: 2, name: "Test 2" },
          { id: 3, name: "Test 3" },
        ]}
      />
    </Form>
  )
}

export function Select(props) {
  // Get field properties
  const [field, meta, helpers] = useField(props);

  // Set initial value for `Select`
  const [selectedItem, setSelectedItem] = useState(null);

  // On change, update `Headless UI` and `Formik` values
  const handleChange = (newValue) => {
    setSelectedItem(newValue); // Update the Headless UI state
    helpers.setValue(newValue); // This seems to "break" the Headless UI state
  };

  // Return `Select` structure
  return (
    <Listbox
      value={selectedItem}
      name={props.name}
      onChange={handleChange}
      // onBlur={field.onBlur} ...Commented out for now as trying to figure out issue with `onChange`
    >
      <Listbox.Label>Test Label:</Listbox.Label>
      <Listbox.Button>
        {selectedItem ? selectedItem.name : "-- Select --"}
      </Listbox.Button>
      <Listbox.Options>
        {props.items.map((item) => {
          return (
            <Listbox.Option
              className={({ active }) => (active ? "active" : "")}
              key={item.id}
              value={item}
            >
              {({ selected }) => (
                <>
                  {item.name}
                  {selected ? <CheckIcon /> : null}
                </>
              )}
            </Listbox.Option>
          );
        })}
      </Listbox.Options>
    </Listbox>
  );
}

Answer 1

我设法让它像这样工作:

import { useField } from "formik";

interface SelectProps {
  name: string;
  label: string;
  options: string[];
}

export const Select: React.FC<SelectProps> = ({
  name,
  label,
  options,
}) => {
  const [field] = useField({ name });

  return (
    <Listbox
      value={field.value}
      onChange={(value: string) => {
        field.onChange({ target: { value, name } });
      }}
    >
      ...
    </Listbox>
  );
};