reactjs - MUI 自动完成的 'defaultValue' 在与 react-hook-form 的 Controller 一起使用时不起作用

Question

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

<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

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

然后您还可以实现 getOptionSelected AutoComplete

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" />
          )}
        />
      }
    />
  );
}