Mantine表单中NumberInput组件光标丢失问题的解决方案

在使用Mantine的use-form和NumberInput组件时，开发者可能会遇到一个常见问题：当在自定义onChange处理函数中调用form.setFieldValue方法时，输入框会失去焦点，导致无法连续输入数字。本文将深入分析这个问题并提供解决方案。

问题现象分析

在表单处理场景中，特别是需要根据一个字段值动态计算另一个字段值时，开发者通常会这样实现：

const handleQtyChange = (index: number, poItem: any, value: any) => {
    form.setFieldValue(`purchaseItems.${index}.qty`, Number(value));
    const tempPricePoItem = +(poItem.price * value).toFixed(2);
    form.setFieldValue(`purchaseItems.${index}.pricePoItem`, tempPricePoItem);
};

这种实现虽然能正确更新两个字段的值，但会导致以下问题：

1. 每次输入数字后光标会丢失
2. 用户需要反复点击输入框才能继续输入
3. 严重影响表单填写体验

根本原因

这个问题源于React的渲染机制和Mantine表单的工作方式：

1. 组件重新渲染：每次调用form.setFieldValue都会触发表单状态的更新，导致组件重新渲染
2. 输入框重建：重新渲染过程中，NumberInput组件会被重建，导致失去焦点
3. 事件处理时机：同步的状态更新会立即触发渲染，打断了用户的输入流程

解决方案

方案一：使用useEffect监听变化（推荐）

useEffect(() => {
    const total = form.values.purchaseItems.reduce((sum, item) => {
        return sum + (item.qty * item.price);
    }, 0);
    form.setFieldValue('total', total);
}, [form.values.purchaseItems]);

这种方法通过监听相关字段的变化来计算派生值，不会干扰用户的输入过程。

方案二：优化状态更新逻辑

如果必须立即更新，可以尝试以下优化：

const handleQtyChange = (index: number, value: number) => {
    const newValues = {
        ...form.values,
        purchaseItems: form.values.purchaseItems.map((item, i) => 
            i === index ? {
                ...item,
                qty: value,
                pricePoItem: +(item.price * value).toFixed(2)
            } : item
        )
    };
    form.setValues(newValues);
};

这种方法通过单次批量更新减少渲染次数。

最佳实践建议

1. 派生状态处理：对于计算字段，优先考虑在提交时计算或使用useEffect监听
2. 批量更新：尽量减少setFieldValue的调用次数
3. 性能优化：对于大型表单，考虑使用debounce或throttle优化频繁更新
4. 组件稳定性：确保表单组件的key属性稳定，避免不必要的重建

通过理解Mantine表单的工作原理和React的渲染机制，开发者可以更好地处理这类交互问题，提升表单的用户体验。