渲染後如何在 React 中聚焦輸入欄位？

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中文網其他相關文章！