Ant Design TextArea组件focus方法无法正常生效问题求助

排查常见原因及对应解决方法 #

• 检查组件是否处于禁用状态
  你的代码中TextArea设置了disabled={qalaraEdit}，如果qalaraEdit为true，组件处于禁用状态，此时调用focus()完全无效。触发焦点前必须确保qalaraEdit的值为false，让组件处于可交互状态。

• 正确获取AntD TextArea的真实DOM节点
  Ant Design的TextArea是对原生textarea的封装，部分场景下直接调用ref的focus()无法生效，需要获取内部的原生textarea元素：
  修改焦点触发代码为：

  onClick={() => {
    // 获取内部原生textarea元素
    const textAreaElement = focusSheet.current?.resizableTextArea?.textArea;
    if (textAreaElement) {
      textAreaElement.focus();
    }
    editSheetRef.current.scrollIntoView({ 
      behavior: 'smooth',
      block: "end", 
      inline:"nearest"
    });
  }}
  

• 调整scrollIntoView和focus的执行顺序
  scrollIntoView的smooth滚动是异步行为，可能会干扰焦点设置。可以将焦点操作放在滚动完成后，或者先执行聚焦再滚动：

  onClick={() => {
    const textAreaElement = focusSheet.current?.resizableTextArea?.textArea || focusSheet.current;
    if (textAreaElement) {
      textAreaElement.focus();
    }
    // 用setTimeout确保聚焦完成后再执行滚动
    setTimeout(() => {
      editSheetRef.current.scrollIntoView({ 
        behavior: 'smooth',
        block: "end", 
        inline:"nearest"
      });
    }, 0);
  }}
  

• 确认ref已正确绑定组件
  必须确保focusSheet是通过useRef()正确创建的，没有被错误赋值：

  import { useRef } from 'react';
  const focusSheet = useRef(null);
  

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