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

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

一种方法是使用文档中建议的引用。通过将 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 (
    
  );
};

export default MyComponent;

Autofocus Option

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

return (
  
);

请注意，在 JSX 中，该属性是 autoFocus（大写 F），与不区分大小写的 HTML 属性不同。