Mantine表单中嵌套数组输入框失焦问题的分析与解决

问题现象描述

在使用Mantine表单库处理嵌套数组结构数据时，开发者可能会遇到一个典型问题：当在嵌套数组的输入框中输入内容时，输入框会在第一次输入时失去焦点，需要第二次输入才能正常工作。这种现象特别容易出现在处理多层嵌套的数据结构中，比如包含sections数组，每个section又包含rows数组的场景。

问题根源分析

这个问题的根本原因在于React的重新渲染机制和组件key的使用方式。在原始代码中，开发者使用了form.key()方法来动态生成输入框的key属性。每次表单值发生变化时，这个方法会生成新的key，导致React认为这是一个全新的组件，从而销毁并重新创建输入框，造成焦点丢失。

解决方案

方案一：使用uncontrolled模式

Mantine表单提供了两种模式：

• controlled模式：表单状态由React完全控制
• uncontrolled模式：表单元素保持自己的状态

将表单初始化为uncontrolled模式可以避免这个问题：

const form = useForm({
  mode: "uncontrolled",
  initialValues: props.data.interactive,
});

方案二：移除动态key属性

更推荐的解决方案是直接移除输入框上的key属性，或者使用稳定的key值。在Mantine表单中，getInputProps已经处理了大部分表单逻辑，不需要额外添加key属性。

// 错误做法（会导致重新渲染）
<TextInput
  key={form.key(`action.sections.${sectionIndex}.rows.${rowIndex}.title`)}
  {...form.getInputProps(`action.sections.${sectionIndex}.rows.${rowIndex}.title`)}
/>

// 正确做法
<TextInput
  {...form.getInputProps(`action.sections.${sectionIndex}.rows.${rowIndex}.title`)}
/>

最佳实践建议

1. 避免动态生成key：在表单元素中，除非有特殊需求，否则不要动态生成key属性。Mantine的表单控制方法已经处理了大部分状态管理需求。

2. 理解React渲染机制：当组件的key发生变化时，React会将其视为不同的组件实例，导致重新挂载而非更新。这在表单场景中通常不是期望的行为。

3. 合理选择表单模式：对于复杂表单，特别是包含动态字段的表单，uncontrolled模式可能提供更好的性能表现和用户体验。

4. 嵌套数组结构处理：在处理多层嵌套的数组结构时，保持组件结构的稳定性比动态key更重要。Mantine的form.removeListItem和form.insertListItem方法已经能够正确处理数组更新。

通过理解这些原理和采用正确的实践方法，开发者可以避免表单输入框的焦点丢失问题，构建出更加稳定可靠的动态表单应用。