Mantine Form TextInput嵌套组件时无法维持焦点问题咨询

这不是Mantine的Bug，本质是React组件渲染机制的问题：

当你在Test组件内部定义Wrap组件时，每次Test组件重新渲染，Wrap都会被重新创建为一个全新的组件类型。React会判定这是不同的组件，进而卸载旧的Wrap实例、挂载新的实例——这就导致TextInput每次输入时都会因为组件重建丢失焦点，同时useForm绑定的inputProps也无法正常同步状态。

而直接返回TextInput时，TextInput是外部导入的稳定组件类型，每次渲染都是同一个组件，React只会更新其props而非卸载重建，因此可以正常工作。

解决方案 #

方案1：将子组件移到外部定义 #

把Wrap组件从Test内部抽出来，避免每次渲染都重新创建组件：

// Test.tsx
import { TextInput } from '@mantine/core';

const Wrap = ({ inputProps }) => {
  return <TextInput placeholder="Test..." {...inputProps} />;
};

export default function Test({ inputProps }) {
  return <Wrap inputProps={inputProps} />;
}

方案2：用React.memo缓存内部子组件 #

如果必须在Test内部定义Wrap（比如需要访问Test内部的状态或props），可以用React.memo来缓存组件，避免不必要的重建：

// Test.tsx
import { TextInput } from '@mantine/core';
import { memo } from 'react';

export default function Test({ inputProps }) {
  const Wrap = memo(() => {
    return <TextInput placeholder="Test..." {...inputProps} />;
  });

  return <Wrap />;
}

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