React.jsでクリック時に画像を変更する方法

2024-02-08 09:52 React.js イベント処理 画像変更

  1. まず、Reactプロジェクトをセットアップします。必要なライブラリやモジュールをインストールし、必要なファイルを作成します。

  2. 画像ファイルをプロジェクトに追加します。publicフォルダ内に画像を配置するか、srcフォルダ内に画像ファイルをインポートする方法があります。

  3. Reactコンポーネントを作成します。以下は簡単な例です。

import React, { useState } from 'react';
const ImageComponent = () => {
  const [imageUrl, setImageUrl] = useState('初期の画像URL');
  const handleClick = () => {
    // 画像のURLを変更する処理
    setImageUrl('新しい画像URL');
  };
  return (
    <div>
      <img src={imageUrl} alt="画像" />
      <button onClick={handleClick}>画像を変更</button>
    </div>
  );
};
export default ImageComponent;

  1. 上記の例では、useStateフックを使用してimageUrlという状態変数を定義し、初期値を設定しています。handleClick関数はクリック時に呼び出され、setImageUrlを使用してimageUrlの値を更新します。

  2. <img>タグでは、src属性にimageUrlを指定しています。初期値として設定された画像が表示されます。

  3. <button>タグでは、onClick属性にhandleClick関数を指定しています。ボタンがクリックされると、handleClick関数が実行され、imageUrlの値が新しい画像のURLに更新されます。

これで、クリック時に画像を変更するReactコンポーネントが完成しました。このコンポーネントを他のコンポーネントで使用することができます。

以上がReact.jsでクリック時に画像を変更する方法のシンプルな例です。必要に応じて、さまざまな画像や追加の機能を実装することもできます。