ReactJSでonKeyPressイベントを処理する方法

2024-04-02

ReactJSでonKeyPressイベントを処理する方法

イベントハンドラの設定

onKeyPressイベントを処理するには、onKeyPressプロパティを使用してイベントハンドラ関数を設定します。この関数は、イベントオブジェクトを引数として受け取ります。

const MyComponent = () => {
  const handleKeyPress = (event) => {
    // event.keyで押されたキーを取得
    console.log(`キーが押されました: ${event.key}`);
  };

  return (
    <input type="text" onKeyPress={handleKeyPress} />
  );
};

イベントオブジェクトには、イベントに関するさまざまな情報が含まれています。

key: 押されたキー
code: キーのコード
target: イベントが発生した要素

イベントの処理

イベントハンドラ関数では、イベントオブジェクトを使用して押されたキーを処理できます。

const MyComponent = () => {
  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      // Enterキーが押されたときの処理
      console.log('Enterキーが押されました');
    } else if (event.key === 'Backspace') {
      // Backspaceキーが押されたときの処理
      console.log('Backspaceキーが押されました');
    }
  };

  return (
    <input type="text" onKeyPress={handleKeyPress} />
  );
};

イベントの伝播

onKeyPressイベントは、バブリングと呼ばれるプロセスで伝播します。これは、イベントが最初に発生した要素から、その親要素、さらにその親要素へと伝播していくことを意味します。

イベントの伝播を止めるには、event.stopPropagation()メソッドを使用します。

const MyComponent = () => {
  const handleKeyPress = (event) => {
    // イベントの伝播を止める
    event.stopPropagation();

    // 処理
  };

  return (
    <input type="text" onKeyPress={handleKeyPress} />
  );
};

onKeyPressイベントは、ユーザーがキーを押し下げたときに発生するイベントです。このイベントを処理することで、さまざまな操作を実行できます。

const MyComponent = () => {
  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      // Enterキーが押されたときの処理
      console.log('Enterキーが押されました');
    } else if (event.key === 'Backspace') {
      // Backspaceキーが押されたときの処理
      console.log('Backspaceキーが押されました');
    } else {
      // その他のキーが押されたときの処理
      console.log(`キーが押されました: ${event.key}`);
    }
  };

  return (
    <div>
      <input type="text" onKeyPress={handleKeyPress} />
      <p>押されたキー: </p>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.getElementById('root'));

Enterキーが押された場合は、「Enterキーが押されました」というメッセージを出力します。
その他のキーが押された場合は、押されたキーの名前を出力します。

実行方法

このコードを実行するには、次の手順が必要です。

Node.jsをインストールします。
Yarnまたはnpmをインストールします。
プロジェクトフォルダを作成し、次のコマンドを実行します。

yarn init -y

package.jsonファイルに次のライブラリを追加します。

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

index.jsファイルを作成し、上記のサンプルコードを貼り付けます。
次のコマンドを実行してコードを実行します。

yarn start

ブラウザで http://localhost:3000 を開きます。

結果

ブラウザで http://localhost:3000 を開くと、input要素が表示されます。この要素にキーを入力すると、押されたキーに関する情報が出力されます。

onKeyPressイベントを処理する他の方法

onKeyDownイベントは、ユーザーがキーを押し下げたときに発生します。onKeyPressイベントと同様に、イベントオブジェクトを使用して押されたキーを処理できます。

const MyComponent = () => {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      // Enterキーが押されたときの処理
      console.log('Enterキーが押されました');
    } else if (event.key === 'Backspace') {
      // Backspaceキーが押されたときの処理
      console.log('Backspaceキーが押されました');
    } else {
      // その他のキーが押されたときの処理
      console.log(`キーが押されました: ${event.key}`);
    }
  };

  return (
    <div>
      <input type="text" onKeyDown={handleKeyDown} />
      <p>押されたキー: </p>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.getElementById('root'));

onKeyDownイベントとonKeyPressイベントの違いは、onKeyDownイベントはすべてのキーに対して発生するということです。一方、onKeyPressイベントは、英数字、記号、スペースキーなどの特定のキーに対してのみ発生します。

useStateフックを使用して、押されたキーの状態を追跡することができます。

const MyComponent = () => {
  const [key, setKey] = useState('');

  const handleKeyDown = (event) => {
    setKey(event.key);
  };

  return (
    <div>
      <input type="text" onKeyDown={handleKeyDown} />
      <p>押されたキー: {key}</p>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.getElementById('root'));

このコードでは、useStateフックを使用してkeyという状態変数を初期化しています。handleKeyDownイベントハンドラは、押されたキーをkey状態変数に設定します。

const MyComponent = () => {
  const keyRef = useRef('');

  const handleKeyDown = (event) => {
    keyRef.current = event.key;
  };

  return (
    <div>
      <input type="text" onKeyDown={handleKeyDown} />
      <p>押されたキー: {keyRef.current}</p>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.getElementById('root'));