本文旨在解决 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 (
因此，聚焦失败的常见原因是：
组件被禁用： TextArea 组件的 disabled 属性被设置为 true。这可能是由组件自身的 disabled prop 直接控制，或者由父组件的上下文逻辑间接导致。状态不同步： 触发聚焦操作时，控制 TextArea 禁用状态的 React state 尚未更新，导致 TextArea 仍处于禁用状态。
解决方案
解决此问题的关键在于确保在尝试聚焦时，TextArea 组件处于可交互状态（即 disabled 属性为 false），并通过 useEffect 钩子监听相关状态变化，以确保聚焦操作在正确的时间点执行。
步骤一：确保组件可交互
首先，需要管理控制 TextArea 禁用状态的 state。在触发聚焦操作的事件处理器中，应同步更新此 state，使其允许 TextArea 变为可编辑状态。
import React, { useRef, useState, useEffect } from 'react';import { Input } from 'antd';const { TextArea } = Input;function MyComponent() { const [revisions, setRevisions] = useState(''); const [qalaraEdit, setQalaraEdit] = useState(true); // 初始禁用 const [shouldFocus, setShouldFocus] = useState(false); // 新增状态，用于控制聚焦 const handleClick = () => { // 在点击时，先将TextArea设置为启用状态 setQalaraEdit(false); // 然后标记需要聚焦 setShouldFocus(true); }; // ... (其他代码)}
步骤二：使用 useEffect 监听状态并设置焦点
由于 Ant Design 组件的 ref.current.focus() 在组件被禁用时可能无法生效，或者在 React state 更新后 DOM 尚未完全渲染时调用，我们可以采用更直接的方式：为 TextArea 添加一个 id 属性，并使用 document.getElementById() 在 useEffect 中监听状态变化，然后对原生 DOM 元素进行聚焦。
import React, { useRef, useState, useEffect } from 'react';import { Input } from 'antd';const { TextArea } = Input;function MyComponent() { const [revisions, setRevisions] = useState(''); const [qalaraEdit, setQalaraEdit] = useState(true); // 初始禁用 const [shouldFocus, setShouldFocus] = useState(false); // 新增状态，用于控制聚焦 const handleClick = () => { setQalaraEdit(false); // 启用TextArea setShouldFocus(true); // 标记需要聚焦 }; useEffect(() => { if (shouldFocus && !qalaraEdit) { // 确保需要聚焦且TextArea已启用 const textAreaElement = document.getElementById('my-text-area-id'); if (textAreaElement) { textAreaElement.focus(); setShouldFocus(false); // 聚焦后重置状态，避免重复聚焦 } } }, [shouldFocus, qalaraEdit]); // 监听这两个状态的变化 return (