快捷導(dǎo)航

React 自動(dòng)聚焦字段使用詳解

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

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

正文

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

要讓輸入框自動(dòng)聚焦，最簡(jiǎn)單的方法是使用 autoFocus 屬性（注意大小寫(xiě)）：

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

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

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

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

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

我們會(huì)將它編寫(xiě)成一個(gè) Hooks，以便我們可以在項(xiàng)目中重復(fù)使用它。

使用 useCallback()

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

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

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

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

使用 useRef() 和 useEffect()

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

useRef() 鉤子對(duì)函數(shù)組件的作用與 createRef() 對(duì)基于類(lèi)組件的作用相同。這個(gè)鉤子創(chuàng)建了一個(gè)普通的 JavaScript 對(duì)象，您可以將其傳遞給一個(gè)元素，以保持對(duì)它的引用。可以通過(guò)對(duì)象的 current 屬性訪問(wèn)此引用。

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)建了對(duì)輸入框的引用。然后，當(dāng)組件渲染時(shí)，我們使用引用對(duì)象的 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>
          用戶(hù)
          <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 自動(dòng)聚焦字段使用詳解的詳細(xì)內(nèi)容，更多關(guān)于React 自動(dòng)聚焦字段的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！