Mantine表单库中非受控模式下setValues导致输入框失焦问题解析

问题现象分析

在使用Mantine表单库的useForm钩子时，开发者在非受控模式(uncontrolled mode)下遇到一个典型问题：当在onValuesChange回调中调用form.setValues()方法时，每次键盘输入都会导致输入框失去焦点。这个现象在受控模式(controlled mode)下则不会出现。

技术原理探究

非受控模式与受控模式的区别

Mantine的表单管理提供了两种模式选择：

1. 受控模式：表单状态完全由React状态管理，每次输入都会触发重新渲染
2. 非受控模式：表单元素保持DOM原生状态，Mantine通过ref来获取值

问题根源

在非受控模式下调用setValues()会触发以下过程：

1. 表单内部会更新所有字段的key值
2. 导致React重新创建DOM元素
3. 输入框被卸载后重新挂载
4. 自然失去焦点状态

解决方案

推荐方案：使用受控模式

对于需要动态设置表单值的场景，官方推荐使用受控模式：

const form = useForm({
  mode: "controlled",
  // 其他配置
});

替代方案：精准更新字段

如果必须使用非受控模式，可以采用setFieldValue替代setValues，只更新特定字段：

form.setFieldValue('fieldName', newValue);

这种方法不会触发所有字段的重新渲染，可以保持输入框焦点。

最佳实践建议

1. 对于简单表单，优先考虑非受控模式以获得更好性能
2. 对于需要复杂联动或动态计算的表单，使用受控模式
3. 避免在onValuesChange中执行大规模状态更新
4. 对于字段间联动，考虑使用transformValues而非onValuesChange

总结

Mantine表单库的这种行为设计是出于性能优化的考虑。理解两种模式的底层原理，可以帮助开发者根据具体场景选择最合适的实现方式，避免常见的交互问题。在大多数需要字段联动的场景下，受控模式是更可靠的选择。