这些是使用react-hook-form的MUI自动完成时的关键点：

• 定义适当的默认值。
• 使用MUI自动完成。
• 不要将react-hook-form.onChange钩子属性直接应用于自动完成组件。

默认值

当使用react-hook-form与MUI自动完成时，你应该在使用react-hook-form钩子时提供一个正确的默认值。react-hook-form不能知道你是否要使用一个单一选择的自动完成，这意味着value是typeof string或多个选择，然后value prop是typeof string[]。

const { control, handleSubmit } = useForm({
  defaultValues: {
    country: multiple ? ([] as string[]) : "",
    // even better
    country: multiple ? ([] as string[]) : options[0],

  },
});

字符串

isOptionToValue

由于MUI自动完成依赖于对象引用相等性，但Control组件返回选项的副本，而不是选项本身，因此您应该设置isOptionEqualToValue以测试选项是否基于唯一属性相等，例如：

isOptionEqualToValue={(option, value) => option.label === value.label

型

adjust onChange

默认情况下，Control会传递onChange handler，它接受值event.target.value。好吧，我们不想要这个值，所以我们应该覆盖它：

<Autocomplete
  {...field}
  onChange={(event: any, newValue: string | null) => {
    return field.onChange(newValue);
  }}
  ...

型

最终结果

你可以改变multiple属性来自动完成单/多
sandbox
验证码：

import * as React from "react";
import { Controller, useForm } from "react-hook-form";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Autocomplete from "@mui/material/Autocomplete";

export default function CountrySelect({ multiple = true }) {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      country: multiple ? ([] as CountryType[]) : options[0],
    },
  });
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name={"country"}
        control={control}
        render={({ field }) => {
          return (
            <Autocomplete
              {...field}
              onChange={(
                event: any,
                newValue: CountryType[] | CountryType | null
              ) => {
                return field.onChange(newValue);
              }}
              multiple={multiple}
              options={options}
              // getOptionLabel={(option) => options.label}
              isOptionEqualToValue={(option, value) =>
                option.label === value.label
              }
              renderInput={(params) => (
                <TextField {...params} label={"country"} />
              )}
            />
          );
        }}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}

interface CountryType {
  code: string;
  label: string;
  phone: string;
  suggested?: boolean;
}

// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
const options: readonly CountryType[] = [
  { code: "AD", label: "Andorra", phone: "376" },
  {
    code: "AE",
    label: "United Arab Emirates",
    phone: "971",
  },
  { code: "AF", label: "Afghanistan", phone: "93" },
  {
    code: "AG",
    label: "Antigua and Barbuda",
    phone: "1-268",
  },
  { code: "AI", label: "Anguilla", phone: "1-264" },
  { code: "AL", label: "Albania", phone: "355" },
  { code: "AM", label: "Armenia", phone: "374" },
  { code: "AO", label: "Angola", phone: "244" },
  { code: "AQ", label: "Antarctica", phone: "672" },
  { code: "AR", label: "Argentina", phone: "54" },
  { code: "AS", label: "American Samoa", phone: "1-684" },
  { code: "AT", label: "Austria", phone: "43" },
];

型