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