如何使用useRef React鉤子

找出useRef React鉤子有什麼用,以及如何使用它!

看看我的React鉤子介紹首先,如果您是他們的新手。

我有時使用的一個React鉤子是useRef

import React, { useRef } from 'react'

這個鉤子允許我們強制性地訪問DOM元素。

這是一個示例,其中我將包含計數值的span元素的DOM引用的值登錄到控制台:

import React, { useState, useRef } from 'react'

const Counter = () => { const [count, setCount] = useState(0) const counterEl = useRef(null)

const increment = () => { setCount(count + 1) console.log(counterEl) }

return ( <> Count: <span ref={counterEl}>{count}</span> <button onClick={increment}>+</button> </> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

注意const counterEl = useRef(null)行和<span ref={counterEl}>{count}</span>。這就是設置鏈接的原因。

現在,我們可以通過訪問counterEl.current

在Codepen上查看:

看筆反應useRef鉤子由Flavio Copes(@flaviocopes) 在密碼筆

Tech Wiki Online!