Mantine与React Hook Form集成中的默认值处理问题解析

在使用Mantine UI组件库与React Hook Form进行表单集成时，开发者可能会遇到一个关于默认值处理的常见问题。本文将深入分析这一问题的成因，并提供正确的解决方案。

问题现象

当使用Mantine的TextInput组件与React Hook Form的Controller组件结合时，如果设置了异步获取的默认值，在首次删除输入框内容时，onChange回调函数不会被触发。这种情况通常发生在表单数据需要从API异步加载的场景中。

问题根源

这个问题的根本原因在于组件使用模式的不匹配。React Hook Form的Controller组件设计用于受控组件，而示例中却以非受控方式使用了Mantine的TextInput组件。具体表现为：

1. 错误地使用了defaultValue属性而非value属性
2. 没有正确地将React Hook Form的field对象属性传递给输入组件
3. 忽略了Controller组件对受控状态的管理要求

正确解决方案

要解决这个问题，需要遵循React Hook Form的最佳实践，将Mantine组件作为完全受控组件使用：

<Controller
  control={control}
  name="name"
  render={({ field }) => (
    <TextInput
      value={field.value}
      onChange={field.onChange}
      onBlur={field.onBlur}
    />
  )}
/>

关键要点

1. 受控组件原则：必须使用value而非defaultValue，让React Hook Form完全控制组件状态
2. 完整属性传递：除了onChange，还应传递onBlur等必要的事件处理器
3. 性能优化：React Hook Form的Controller会自动优化渲染性能，无需手动处理

异步默认值处理

对于异步加载的默认值，React Hook Form提供了良好的支持。只需在useForm的defaultValues配置中返回Promise即可，如示例所示：

useForm({
  defaultValues: async () => {
    const data = await fetchData();
    return data;
  }
})

总结

Mantine组件与React Hook Form的集成需要遵循受控组件的模式。通过正确使用Controller组件和传递必要的属性，可以避免默认值处理中的各种边界情况问题，同时获得最佳的性能和用户体验。