Ant Design TextArea 聚焦失效的排查与解决方案

本文旨在解决 ant design `textarea` 组件无法正确获取焦点的问题，该问题常见于组件被禁用或相关状态管理不当。文章将深入分析导致聚焦失败的根本原因，并提供一种基于 `useeffect` 和直接 dom 操作的可靠解决方案，确保在组件状态变化后能够成功设置焦点。

问题描述

在使用 Ant Design 的 TextArea 组件时，开发者可能遇到通过 ref 调用 focus() 方法后，文本区域却无法显示光标（即未能成功聚焦）的情况。这通常发生在尝试通过用户交互（如点击按钮）触发聚焦时。

以下是常见的代码示例，展示了通过 ref 设置聚焦的尝试：

import React, { useRef } from 'react';
import { Input } from 'antd';

const { TextArea } = Input;

function MyComponent() {
  const focusSheet = useRef(null);
  const [revisions, setRevisions] = React.useState('');
  const [qalaraEdit, setQalaraEdit] = React.useState(true); // 假设此状态控制TextArea的禁用

  const handleClick = () => {
    // 尝试聚焦TextArea
    if (focusSheet.current) {
      focusSheet.current.focus();
    }
    // 同时可能伴随滚动操作
    // editSheetRef.current.scrollIntoView({ behavior: 'smooth', block: "end", inline:"nearest"});
  };

  return (
    <p>
      <TextArea
        className=""
        style={{
          fontFamily: "Sen",
          color: "#191919",
        }}
        value={revisions}
        onChange={(e) => setRevisions(e.target.value)}
        placeholder="Enter any packaging requirements"
        autoSize={{ minRows: 4, maxRows: 6 }}
        disabled={qalaraEdit} // 注意这里的disabled属性
        ref={focusSheet}
      />
      <button onClick={handleClick}>
        聚焦文本区域
      </button>
    </p>
  );
}

登录后复制

在上述代码中，尽管 focusSheet.current.focus() 被调用，但如果 qalaraEdit 为 true，TextArea 将处于禁用状态，导致聚焦操作无效。

根本原因分析

Ant Design 的 TextArea 组件是一个封装了原生 元素的 React 组件。当组件的 disabled 属性设置为 true 时，它会阻止用户与该组件进行任何交互，包括聚焦。即使通过 ref 成功获取到组件实例并调用其 focus() 方法，如果组件内部的 <textarea> 元素处于禁用状态，聚焦操作也会被浏览器忽略。

因此，聚焦失败的常见原因是：

1. 组件被禁用： TextArea 组件的 disabled 属性被设置为 true。这可能是由组件自身的 disabled prop 直接控制，或者由父组件的上下文逻辑间接导致。
2. 状态不同步： 触发聚焦操作时，控制 TextArea 禁用状态的 React state 尚未更新，导致 TextArea 仍处于禁用状态。

解决方案

解决此问题的关键在于确保在尝试聚焦时，TextArea 组件处于可交互状态（即 disabled 属性为 false），并通过 useEffect 钩子监听相关状态变化，以确保聚焦操作在正确的时间点执行。

标签： react 处理器 浏览器