当与react-hook-form的控制器一起使用时，MUI Autocomplete的'defaultValue'不起作用

Question

我正在尝试将MUI的自动完成功能与react-hook-form一起使用。我已经在React Hook Form的Controller中包装了一个自动完成组件。当我尝试将defaultValue设置为AutoComplete时，它不起作用，当我尝试更改预设值时，自动完成组件会中断。 这是我的代码段。

<Controller
  name="combo-box-demo"
  control={control}
  defaultValue={top100Films.find(film => film.year === selectedFilmYear)}
  as={
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  }
/>

工作示例代码的沙盒链接为here。

Answer 1

您应该在onChange上添加一个Controller道具，并返回选定的对象值

然后，您还可以实现getOptionSelected自动完成

export default function ComboBox() {
  const { control } = useForm({});
  const [selectedFilmYear, setSelectedFilmYear] = React.useState(1994);
  return (
    <Controller
      name="combo-box-demo"
      control={control}
      defaultValue={top100Films.find(film => film.year === selectedFilmYear)}
      onChange={([val, obj]) => obj}
      as={
        <Autocomplete
          id="combo-box-demo"
          options={top100Films}
          getOptionSelected={(obj, newval) => obj.name === newval.name}
          getOptionLabel={option => option.title}
          style={{ width: 300 }}
          renderInput={params => (
            <TextField {...params} label="Combo box" variant="outlined" />
          )}
        />
      }
    />
  );
}