脳汁portal

アメリカ在住(だった)新米エンジニアがその日学んだIT知識を書き綴るブログ

ReactでEnterキーのpushイベントを取得する方法

ReactでEnter keyが押されたときにアクションを設定する方法です。

ソースコード

var Test = React.createClass(
    {
        sendCommand(e) { # <== ①
            var ENTER = 13;  # <== ②
            if (e.keyCode == ENTER) {   # <== ③
                // Enterが押されたときのアクション
            }
        },
        render: function() {
            return (
                <input onKeyDown={this.sendCommand}  />  # <== ④
            );
        }
    }
);

React.render(<Test />, document.body);   # <== ⑤

説明

①sendCommandメソッドを宣言して、引数として発火のイベントを取得します
②ENTERキーのkey codeである13を変数に格納します。
(これはわかりやすくするために書いてあるだけなので、直接13というkeycodeを使ってもいいです)
③イベントのkey codeがENTER(13)かどうかで分岐させて、この内部にエンターキーが押されたときに実行したい処理を書きます
④inputエリアで何かキーが押されたとき(ENTERに限らず)に、上で定義したsendCommandメソッドを呼びます
⑤最後にReactの作法に則って表示させればOKです。