Material UI Autocomplete结合React Hook Form验证失效问题如何解决？

核心错误点 #

• 校验规则配置位置错误：React Hook Form 的rules校验规则需要定义在Controller组件上，你之前写在内部TextField上的规则不会被 RHF 识别，自然无法触发校验
• 选中回调绑定位置错误：Autocomplete 的选中值回调是挂载在 Autocomplete 组件本身，你之前把onChange写在内部 TextField 上，无法正确将 Autocomplete 的选中值同步到 RHF 的表单状态
• 参数透传逻辑错误：直接将 Controller 渲染回调的所有 props 透传给 TextField，会覆盖 Autocomplete 传递给 TextField 的原生参数，导致组件行为异常
• 错误提示未完整绑定：仅给 TextField 绑定了 error 状态，没有绑定对应的错误信息展示字段，用户看不到报错提示

修正后完整代码 #

<Controller
  name="categories"
  control={control}
  defaultValue=""
  // 校验规则移到Controller层，由RHF统一管控
  rules={{
    required: {
      value: true,
      message: "请告知你的擅长领域，这有助于我们优先为你匹配推荐需求"
    }
  }}
  render={({ field, fieldState }) => (
    <Autocomplete
      className='formInputs'
      options={categories}
      // 绑定RHF的表单值
      value={field.value}
      // 选中值同步到RHF
      onChange={(_, data) => field.onChange(data)}
      renderInput={(params) => (
        <TextField
          // 先透传Autocomplete的原生参数，避免被覆盖
          {...params}
          label="你的擅长领域是？"
          variant="outlined"
          // 绑定错误状态
          error={Boolean(fieldState.error)}
          // 展示错误提示
          helperText={fieldState.error?.message}
        />
      )}
    />
  )}
/>

补充注意事项 #

• 如果你的categories选项是对象类型，需要给 Autocomplete 增加isOptionEqualToValue={(option, value) => option.value === value.value}属性，避免出现值匹配异常、选中不回显的问题
• 如果是支持自由输入的 Autocomplete，需要增加freeSolo属性，同时修改onChange逻辑适配自由输入的场景

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