Cách sử dụng hook useRef React

Tìm hiểu về useRef React hook hữu ích và cách làm việc với nó!

Kiểm tra của tôiGiới thiệu về React hooksđầu tiên, nếu bạn chưa quen với chúng.

Một móc React mà tôi đôi khi sử dụng làuseRef.

import React, { useRef } from 'react'

Móc này cho phép chúng tôi truy cập một cách ngầm định phần tử DOM.

Đây là một ví dụ, trong đó tôi đăng nhập vào bảng điều khiển giá trị của tham chiếu DOM của phần tử span có chứa giá trị đếm:

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’))

Chú ýconst counterEl = useRef(null)dòng, và<span ref={counterEl}>{count}</span>. Đây là những gì thiết lập liên kết.

Bây giờ chúng ta có thể truy cập tham chiếu DOM bằng cách truy cậpcounterEl.current.

Xem nó trên Codepen:

Xem bútReact useRef hookbởi Flavio Copes (@flaviocopes) trênCodePen.

Tech Wiki Online!