本文旨在解决 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 (
