渲染後如何在 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中文網其他相關文章！