快捷導(dǎo)航

React 自動聚焦字段使用詳解

更新時間：2023年07月17日 11:54:44 作者：lio_zero

這篇文章主要為大家介紹了React 自動聚焦字段使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

自動對焦可以讓你的應(yīng)用程序更方便用戶使用，有幾種方法可以自動聚焦 React 輸入框。

要讓輸入框自動聚焦，最簡單的方法是使用 autoFocus 屬性（注意大小寫）：

<input name="username" type="text" autoFocus />

由于該屬性在各個瀏覽器的工作方式不一致，React 內(nèi)部實現(xiàn)了一個 polyfill，會在元素掛載時使用 focus() 方法。

但這并總是有用，我們需要自己封裝一個。

有兩種實現(xiàn)方法：

使用 useCallback()
使用 useRef() 和 useEffect()

我們會將它編寫成一個 Hooks，以便我們可以在項目中重復(fù)使用它。

使用 useCallback()

useCallback() 鉤子返回一個已記憶的回調(diào)函數(shù)。它接受兩個參數(shù)。第一個是要運行的函數(shù)，第二個是運行函數(shù)所依賴的值數(shù)組。

import { useCallback } from 'react'
const useAutoFocus = () => {
  const inputRef = useCallback((inputElement) => {
    if (inputElement) {
      inputElement.focus()
    }
  }, [])
  return inputRef
}
export default useAutoFocus

注意到 useCallback 的第二個參數(shù)是一個空數(shù)組，這意味著該函數(shù)在組件渲染時只運行一次。

當(dāng)表單組件渲染時，將設(shè)置輸入框的引用。它執(zhí)行 useCallback() 鉤子中的函數(shù)，該函數(shù)對輸入框調(diào)用 focus()。

使用 useRef() 和 useEffect()

useffect() 鉤子會告訴 React，在組件渲染之后，您需要組件執(zhí)行一些操作。它接受兩個參數(shù)。第一個是要運行的函數(shù)，第二個是一個依賴項數(shù)組，其功能與 useCallback() 中的相同。

useRef() 鉤子對函數(shù)組件的作用與 createRef() 對基于類組件的作用相同。這個鉤子創(chuàng)建了一個普通的 JavaScript 對象，您可以將其傳遞給一個元素，以保持對它的引用?？梢酝ㄟ^對象的 current 屬性訪問此引用。

import { useRef, useEffect } from 'react'
const useAutoFocus = () => {
  const inputRef = useRef(null)
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus()
    }
  }, [])
  return inputRef
}
export default useAutoFocus

在上面的代碼中，我們創(chuàng)建了對輸入框的引用。然后，當(dāng)組件渲染時，我們使用引用對象的 current 屬性調(diào)用輸入框的 focus()。

使用示例

import { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
import useAutoFocus from './hooks/useAutoFocus'
function App() {
  const emailInput = useAutoFocus()
  return (
    <>
      <form>
        <label>
          用戶
          <input name='username' type='text' ref={emailInput} />
        </label>
        <label>
          密碼
          <input name='password' type='password' />
        </label>
        <button type='submit'>登錄</button>
      </form>
    </>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))

更多資料

React Hooks

以上就是React 自動聚焦字段使用詳解的詳細(xì)內(nèi)容，更多關(guān)于React 自動聚焦字段的資料請關(guān)注腳本之家其它相關(guān)文章！