マウスオーバーした時にどのようにReactを用いて、画像の切り替えを行うか

Question

import React, { Component } from 'react';
import { animateScroll as scroll } from 'react-scroll';

class ButtonComponent extends Component {

  scrollToTop = () => {
    scroll.scrollToTop(); 
  };

  render() {
    return(
      <div className="scroll scroll-up">
        <div className="arrow bounce" style={{ Button }}>
            <img src="/images/button_shadow.png"　onClick={this.scrollToTop}/>
        </div>
      </div>   
    );
  }

}

const Button= (props) => {
    return <img src="/images/Button_shadow.png"/>;
};

export default ButtonComponent;

上記のようなコードがあります。
マウスオーバーした時には、/images/button_noshadow.png、してない時は/images/button_shadow.png
のコードにできるでしょうか？

できればこのコードの中だけで、css的に完結させたいのですが、何卒よろしくお願いいたします。

Answer 1

「このコードの中だけで、css的に完結させたい」に沿うとしたらこんな感じですかね。

class ButtonComponent extends React.Component {
  static style = `
    .button {
      width: fit-content;
      font-size: 0;
    }
    .button:hover .shadow,
    .button .noshadow {
      display: none;
    }
    .button .shadow,
    .button:hover .noshadow {
      display: initial;
    }
  `;
  render() {
    return(
      <>
        <style>{ButtonComponent.style}</style>
        <div className="button">
          <img className="shadow" src="https://placehold.jp/250x50.png?text=shadow"/>
          <img className="noshadow" src="https://placehold.jp/250x50.png?text=noshadow"/>
        </div>
      </>
    );
  }
}

動作サンプルです。

なおご存知のことかとも思いますがReactでのスタイリングは色々ありますのでまとまってる人様のブログを参考として挙げておきます。
Reactのコンポーネントのスタイリングをどうやるか

Answer 2

cssでの対処は思いつきませんが、jsでなら比較的簡単に実現出来ると思います、すみません。

画像のURLをステートとして持ち、onMouseEnter、onMouseLeaveイベントハンドラを利用してステートを切り替えればいいのではないでしょうか。

下記の様なイメージです。

import React, { Component } from 'react';
import { animateScroll as scroll } from 'react-scroll';

class ButtonComponent extends Component {
    constructor() {
        this.state = {
            imageUrl: '/images/button_noshadow.png';
        };
    }

    scrollToTop = () => {
        scroll.scrollToTop();
    };

    render() {
        return (
            <div
                className="scroll scroll-up"
                onMouseEnter={() => this.setState({ imageUrl: '/images/button_shadow.png' });}
                onMouseLeave={() => this.setState({ imageUrl: '/images/button_noshadow.png' });}
            >
                <div className="arrow bounce" style={{ Button }}>
                    <img src={this.state.imageUrl} onClick={this.scrollToTop} />
                </div>
            </div>
        );
    }
}

Comments

[Taka_Yamag]

動きました！ありがとうございます。