material-ui自动完成封装到react-hook-form控制器中，无法获取值

在使用Material-UI的自动完成组件（Autocomplete）与React Hook Form结合时，可能会遇到无法获取输入值的问题。这通常是因为React Hook Form的控制器（Controller）组件没有正确地与Material-UI的Autocomplete组件集成。

基础概念

React Hook Form: 是一个用于管理表单状态的库，它提供了高性能和灵活的API来控制表单。
Material-UI: 是一个流行的React UI框架，提供了丰富的组件来构建现代化的Web界面。
Autocomplete: 是Material-UI中的一个组件，用于实现自动完成功能。

问题原因

当使用Controller组件包装Autocomplete时，需要确保正确设置了name属性和control属性。如果这些属性设置不正确，React Hook Form将无法正确地获取和更新表单值。

解决方案

以下是一个示例代码，展示了如何将Material-UI的Autocomplete组件与React Hook Form的Controller组件正确集成：

import React from 'react';
import { useForm } from 'react-hook-form';
import { Controller, TextField } from '@hookform/react-hooks';
import { Autocomplete } from '@mui/material';
import { TextFieldProps } from '@mui/material/TextField';

type OptionType = {
  label: string;
};

const options = [
  { label: 'Option 1' },
  { label: 'Option 2' },
  { label: 'Option 3' },
];

const MyForm = () => {
  const { control, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="autocomplete"
        control={control}
        defaultValue=""
        render={({ field }) => (
          <Autocomplete
            {...field}
            options={options}
            getOptionLabel={(option) => option.label}
            renderInput={(params) => (
              <TextField
                {...params}
                label="Choose an option"
                variant="outlined"
                error={!!errors.autocomplete}
                helperText={errors.autocomplete?.message}
              />
            )}
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;