渲染后如何在 React 中聚焦输入字段？-js教程-PHP中文网

渲染后如何在 React 中聚焦输入字段？

Linda Hamilton

发布： 2024-11-03 21:15:02

原创

489 人浏览过

How to Focus an Input Field in React After Rendering?

React 渲染后对输入字段进行聚焦

在 React 中，渲染后对输入字段进行聚焦可以通过多种方法实现.

一种方法是按照文档中的建议使用 refs。通过将 ref 分配给渲染函数中的输入字段（例如“nameInput”），您可以访问其 DOM 节点并手动调用 focus 方法。然而，了解何时何地调用该函数至关重要。

调用焦点函数

调用焦点函数最直接的位置是组件的 componentDidMount 生命周期方法。这可确保在组件安装到 DOM 中之后设置焦点。代码如下所示：

import React, { useRef, useEffect } from "react";

const MyComponent = () => {
  const nameInputRef = useRef();

  useEffect(() => {
    if (nameInputRef.current) {
      nameInputRef.current.focus();
    }
  }, []);

  return (
    <input ref={nameInputRef} name="..." />
  );
};

export default MyComponent;

登录后复制

自动对焦选项

或者，您可以使用 React 提供的 autoFocus 属性。通过在输入字段上将此属性设置为 true，组件将在安装时自动获得焦点。

return (
  <input autoFocus name="..." />
);

登录后复制

请注意，在 JSX 中，该属性是 autoFocus（大写 F），与情况不同 -不敏感的 HTML 属性。

以上是渲染后如何在 React 中聚焦输入字段？的详细内容。更多信息请关注PHP中文网其他相关文章！