2019-12-05に投稿

React HooksのuseEffect経由でrefを使う場合

React HooksのuseEffect内経由でrefを使うとundefinedになっていて動作しなかった。具体的にはこんな感じでキーボードイベントを使いたかったパターン。

const ref = createRef<HTMLDivElement>()

useEffect(() => {
  document.addEventListener('keydown', onKeyDown)
  return () => document.removeEventListener('keydown', onKeyDown)
})

function onKeyDown(e: KeyboardEvent) {
  someFunc()
}

function someFunc() {
  ref.current
}

これでrefを指定する。

return (
  <div ref={ref}>
  </div>
)

すると、キー入力をしてuseEffect経由で呼び出されたsomeFunc内のref.currentはundefinedになっている。よく分からない。

とりあえず、createRefではなく、useRefとuseCallbackを組み合わせるとちゃんといけるっぽい。

const ref = useRef<HTMLDivElement>()
const setRef = useCallback((node: HTMLDivElement) => {
  ref.current = node
}, [])

refの指定は下記。

return (
  <div ref={setRef}>
  </div>
)

複雑…。

Ref objects inside useEffect Hooks - Daniel Schmidt - Medium

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント