React Admin中List内Filter致TextInput失焦，如何支持长文本连续输入？

我之前也踩过这个坑！根源在于你传递Filter组件的方式不对，导致React每次都会重新创建组件实例，进而让输入框丢失焦点。

问题原因 #

你现在是把<PostFilter />作为内联JSX直接传给List的filters属性：

<List filters={<PostFilter />} {...props}>

当PostList组件因为任何原因重新渲染时（比如列表数据更新、状态变化），这个内联的<PostFilter />会被React识别为一个全新的组件——它会先卸载旧的Filter组件，再重新挂载一个新的，这就是输入框失去焦点的直接原因。

解决方法 #

只需要把filters的取值改成组件的引用，而不是内联渲染的JSX：

export const PostList = (props) => (
  <List filters={PostFilter} {...props}>
    // ... 列表内容
  </List>
);

这样React会复用同一个PostFilter组件实例，不会在每次重新渲染时卸载重建，输入框就能稳定保持焦点，允许你连续输入长文本了。

额外情况：如果需要给Filter传自定义props #

如果你的PostFilter需要接收额外的props，不要直接内联渲染，而是可以用React.memo包裹Filter组件，或者创建一个memoized的组件实例，比如：

const MemoizedPostFilter = React.memo((props) => <PostFilter {...props} customProp="your-value" />);

export const PostList = (props) => (
  <List filters={MemoizedPostFilter} {...props}>
    // ... 列表内容
  </List>
);

不过大多数场景下，直接传递组件引用就足够解决问题了。

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