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 屬性不同。