如何在react-hook-form中设置MUI Autocomplete组件的值并同步UI

问题描述 #

我接手了一些使用MUI v5组件、基于react-hook-form v6构建的表单代码，其中包含多个Autocomplete组件，需求是选择其中一个组件的选项后，为另一个组件设置默认值（用户后续仍可自行修改）。

我通过watch()监听第一个Autocomplete的变化，再调用setValue()修改第二个控件的取值，该逻辑可以成功更新表单数据，但第二个Autocomplete组件的inputValue没有同步更新，用户看不到UI变化，只有提交表单时onSubmit()返回的数据中能看到对应值已经被修改。

我尝试给<Autocomplete>传入inputValue属性，但由于组件已经被react-hook-form控制，会抛出「控件从非受控转为受控」的错误。

可复现场景：在thing1的Autocomplete中选择"first"应该会将thing2的值设置为"last"，点击提交按钮可以在控制台看到thing2的取值确实更新了，但界面上没有任何变化。

问题更新 #

我在整理问题时想到了一个解决方案：我先尝试给<Autocomplete>调用不同名称的register()，此时调用setValue()后第二个Autocomplete可以正常更新UI了，但提交的表单数据里会多出无用字段。之后我直接删除了<Autocomplete>上原有的register()调用，问题就彻底解决了。看来如果组件已经是<Controller>的子元素，再调用register()是完全不必要的，还会导致状态冲突。

以下是将<Autocomplete>封装在<Controller>中的可用自定义组件代码：

const ControlledAC = ({ name, control, register, options }) => (
  <Controller
    name={name}
    control={control}
    render={(props) => (
      <Autocomplete
        {...props}
        freeSolo
        autoSelect
        options={options}
        onChange={(_, value) => props.onChange(value)}
        renderInput={(params) => <TextField {...params} label={name} />}
      />
    )}
  />
);

不过MUI和react-hook-form的这种交互逻辑感觉不够直观，请问这是通过代码动态设置<Autocomplete>组件取值的正确实现方式吗？

解答 #

你目前的实现是完全正确的，这就是react-hook-form对接MUI Autocomplete这类复杂自定义组件的标准方案。

原问题根因说明

• register是react-hook-form为原生HTML表单元素设计的状态绑定API，仅需要绑定原生的value、onChange、onBlur属性即可完成状态同步，适合<input>、<select>这类基础控件。
• MUI Autocomplete属于封装后的复杂组件，内部维护了独立的下拉状态、输入框状态等，无法直接通过register绑定原生属性完成状态同步，必须使用Controller作为中间层做状态桥接。
• 你之前同时使用Controller和register，相当于给同一个表单字段挂载了两个独立的状态更新逻辑，两者冲突导致表单底层数据更新后，Autocomplete的UI状态没有同步，甚至触发非受控转受控的报错。

可优化点

你可以基于当前的封装再做几个小调整，覆盖更多场景：

1. 去掉冗余的register参数，自定义组件内完全用不到这个参数，减少无效传参。
2. 如果需要支持freeSolo模式下用户手动输入内容的状态同步，可以补全inputValue和onInputChange的绑定逻辑：

const ControlledAC = ({ name, control, options }) => (
  <Controller
    name={name}
    control={control}
    render={({ field: { onChange, value } }) => (
      <Autocomplete
        freeSolo
        autoSelect
        options={options}
        value={value ?? null}
        onChange={(_, newValue) => onChange(newValue)}
        inputValue={value ?? ''}
        onInputChange={(_, newInputValue) => onChange(newInputValue)}
        renderInput={(params) => <TextField {...params} label={name} />}
      />
    )}
  />
);

3. 动态赋值时如果需要触发表单的脏值校验、联动校验，可以给setValue加上对应配置：

setValue('thing2', 'last', {
  shouldDirty: true, // 标记字段为脏状态
  shouldValidate: true // 触发该字段的校验逻辑
})

内容的提问来源于stack exchange，提问作者jdunning