在 React 中使用 useRef 钩子获得焦点事件

Question

大家！ 我正在使用 React 和 Socket.io 开发一个聊天应用程序。 当打开模式窗口并单击模式中的按钮时，我将把鼠标指针移动到主页上存在的 TextArea 组件。 我附上了我想要做的屏幕截图。 但我做不到。 首先我不确定这是否可能。如果可以的话，请告诉我该怎么做。

我打算在 React 中使用 useRef 钩子来获得焦点效果。

Answer 1

您可以调用模态单击按钮的 onClick 函数，并在该函数内部使用以下代码-

const inputRef = useRef(null);

<text-area id="my-area1" ref={inputRef}> </text-area>

const modalClick = () => {
    inputRef.current.focus();
}

如果您的文本区域位于另一个页面上，那么您可以使用 useEffect 钩子，如下所示：

useEffect(() => {
    inputRef.current.focus();
}

因此，一旦您的页面加载，它将自动将焦点设置在文本区域上。