useRefReactフックの使用方法

useRef Reactフックが何に役立つのか、そしてそれをどのように扱うのかを調べてください!

私をチェックしてくださいReactフックの紹介まず、あなたが彼らに不慣れであるならば。

私が時々使うReactフックの1つは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>。これがリンクを設定するものです。

これで、にアクセスしてDOM参照にアクセスできます。counterEl.current

Codepenでそれを参照してください:

ペンを見るuseRefフックを反応させるフラビオ・コープス(@flaviocopes) オンCodePen

Tech Wiki Online!