最新のstateを参照する方法は、色々な方法があります。
ネットで検索すると、callbackを利用した方法や、useRef を利用した方法の記事が多いです。
とても参考になっています。
本記事では、よりシンプルな実装方法を解説いたします。
サンプルプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React, { useState, useEffect } from 'react'; import ReactDOM from "react-dom"; function Sample() { const [count, setCount] = useState(0); const handleEvent = (event => { setCount( c => c + 1 ); }); useEffect(() => { window.addEventListener("keydown", handleEvent); return () => window.removeEventListener("keydown", handleEvent); }, [handleEvent]); return ( <div> <h1>key press count</h1> {count} </div> ); } export default Sample; if (document.getElementById('sample')) { ReactDOM.render(<Sample />, document.getElementById('typing')); } |
