<h1 id="h09b0e2e84f">onKeyPress を取得する</h1> onKeyPressはブラウザでキー入力されたときの動作を制御するために使います。 <h2 id="h3b3329eac0">input で onKeyPress を取得する</h2> 例えば、<code>input</code>タグで、入力後Enterを押して確定する動きをReactで実装すると以下のようになります。 <pre><code>[javascript:React]
const Component = ({text, changeText, sendText}) =&gt; {

 const keyPress = (e) =&gt; {
 if (e.which === 13) sendText()
 if (e.key === 'Enter') setChange()
 }

 return (
 &lt;React.Fragment&gt;
 &lt;input type='text' value={text} onChange={(e) =&gt; changeText(e)} onKeyPress={(e) =&gt; keyPress(e)}&gt;
 &lt;/React.Fragment&gt;
 )
}</code></pre> この例では、入力後Enterを入力すると入力された文字列が送信されます。IME変換確定時のEnterは無視されます。 <h2 id="h47871df9ba">div で onKeyPress を取得する</h2> 上記`input`のような場合は通常フォーカスされた状態で使用するので入力受付時も問題ないですが、そうではない場合は注意が必要です。 画面制御やメディアの再生、停止をキーボードでも操作できるようにするには親要素(`div`など)でイベントを拾わなければなりません。この場合は、<code>tabIndex</code>を指定してマウントされたときにフォーカスするようにします。 <pre><code>[javascript:React]
const Component = ({mediaControl}) =&gt; {

 const keyPress = (e) =&gt; {
 if (e.which === 32) mediaControl() // スペースの入力を拾う
 }

 return (
 &lt;React.Fragment&gt;
 &lt;div onKeyPress={(e) =&gt; keyPress(e)} tabIndex='0'&gt;
 &lt;AppComponent /&gt;
 &lt;/div&gt;
 &lt;/React.Fragment&gt;
 )
}</code></pre> 上記例では、スペースキーでメディアの再生を停止します。しかし、<code>AppComponent</code>内に<code>input</code>や<code>textarea</code>がある場合、イベントはバブリングするので文字列入力時のスペース入力も拾ってしまいます。 この場合は、フォーム要素での入力に<code>event.stopPropagation()</code>メソッドを使うか、<code>div</code>でイベントを拾ったときに除外します。 <pre><code>[javascript:React]
const keyPress = (e) =&gt; {
 e.stopPropagation()
}</code></pre> <pre><code>[javascript:React]
const keyPress = (e) =&gt; {
 if (e.target.tagName !== 'INPUT' &amp;&amp; e.target.tagName !== 'TEXTAREA') return false
 if (e.which === 32) mediaControl()
}</code></pre> <h2 id="h642cf9e467">TypeScriptを使う</h2> onKeyPressイベントのTypeScriptの型は<code>KeyboardEvent&lt;HTMLInputElement&gt;</code>です。最初の例をTypeScriptで書くと以下のようになります。 <pre><code>[javascript:React]
const Component = ({text, changeText, sendText}) =&gt; {

 const keyPress = (e: React.KeyboardEvent&lt;HTMLInputElement&gt;) =&gt; {
 if (e.which === 13) sendText()
 }

 return (
 &lt;React.Fragment&gt;
 &lt;input type='text' value={text} onChange={(e) =&gt; changeText(e)} onKeyPress={(e) =&gt; keyPress(e)}&gt;
 &lt;/React.Fragment&gt;
 )
}</code></pre> <h2 id="h923c78a9c9">キーの判別</h2> 上記の例はキーの<code>charCode</code>を用いて判別を行なっていますが、キーの<code>name</code>や<code>code</code>などで判別する方法もあります。注意点はすべてのブラウザでキーのコードや名前が同じという保証はないので、実際に使用する場合は想定される環境で動作するか確認することをおすすめします。

ゆったりWeb手帳

気になったことをのんびり書くよ