React技术问题：表单提交后textarea无法重新获取焦点原因

核心原因 #

• Antd组件的ref传递错误：你直接把React ref传给了Ant Design的TextArea组件，但Antd的表单输入组件（如Input.TextArea）是封装后的React组件，默认ref指向的是组件实例而非原生<textarea> DOM元素。这就导致inputRef.current?.focus()调用的不是原生DOM的焦点方法，自然无法生效。
• resetFields的更新时机冲突：form.resetFields()会触发表单字段的状态重置，这个过程会伴随组件重渲染。如果在reset后立刻调用focus，后续的重渲染可能会覆盖焦点操作，导致焦点丢失。

修复方案 #

1. 修正ref传递方式 #

Antd提供了innerRef属性来获取输入组件的原生DOM元素，把传给TextArea的ref替换成innerRef：

// Child.tsx 中修改TextArea部分
<TextArea
  placeholder="Search..."
  autoSize
  bordered={false}
  innerRef={ref} // 将ref改为innerRef
/>

2. 确保在reset完成后执行focus #

新版Antd的resetFields是异步函数，返回Promise，我们可以等待它执行完成后再调用focus，避开更新冲突：

// Parent.tsx 中修改onSubmit函数
const onSubmit = useCallback(
  async (values: any) => {
    if (values) {
      await form.resetFields(['question']); // 等待reset完成
      inputRef.current?.focus();
    }
  },
  [form]
);

额外优化：清理无效的useEffect依赖 #

原代码中useEffect依赖inputRef是多余的，因为useRef返回的对象引用永远不会变化，把依赖改成空数组即可：

useEffect(() => {
  inputRef.current?.focus();
}, []); // 仅组件挂载时执行一次初始聚焦

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