Q&A
本来 p タグは入力を受け付けないのですが、tabIndex={0} を指定することにより受け付けるようになります。
あと、onKeyDown={()=>handleKeyDown(e)} は ()=> ではなく (e)=> とすべきでしょうね。
handleKeyDown の中身の記述もあれですが、とりあえず何かが起こるようにはなるかと。
Reactでタイピングゲームを作っているのですがタイピングした値を画面に表示することができません。
handleKeyDown関数の記述が違うの気がするのですがネットを調べても見つけることができませんでした。
コードをどう変えればいいでしょうか？
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Reactで作ったタイピングゲーム</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css" /> <link href="./css/style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="root"></div> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> const Typing = () => { const miss = 0; const words = ['react','python','vue','html','css'] const point = Math.floor(Math.random()*words.length); const word = words[point]; const [tango,setWord] = React.useState(word); const [pressed,setPressed] = React.useState(''); const [position,setPosition] = React.useState(0); const handleKeyDown = (e) => { if(e.key === tango[position]){ setWord(word.slice(1)); setPressed(e.key); } } return( <div className="wrap"> <h2 className="typing">タイピングゲーム</h2> <p>出てきた文字をタイピングして下さい。<br/>正しい文字をタイピングすると文字の色が変わります。<br/></p> <p className="typing" onKeyDown={()=>handleKeyDown(e)} >{pressed}{word}</p> <p>ミスの数は{miss}</p> </div> ); }; const root = document.getElementById('root'); ReactDOM.render(<Typing />, root); </script> </body> </html>
回答1件
0
デバックしたところhandleKeyDown()関数は実行されていませんでした。
jsx
1<p className="typing" onKeyDown={() => handleKeyDown(e)}> 2 {pressed} 3 {word} 4</p>
onKeyDown属性は、p タグに記述できません。
jsx
1<input type="text" onKeyDown={handleKeyDown} />
もしくは、document.onkeydown = function () {} 等を使用してはどうでしょうか？
投稿2021/09/13 13:10
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
