@engineerInGermany
Revisions
Report this question
Subscribe question
Help us understand the problem. What is going on with this question?
Q&A

特定の画像のOpacityを変化させる方法について(React)

解決したいこと

Reactにて画像をOpacityを変化させるコードを書いています.
マウスカーソルを当てた画像に対して,Opacityの変化を適用させたいのですが,
すべての画像(3枚)にOpacityの変化が発生していしまいます.
画像はmapにより,JSX→htmlに変換しています.

正しいコード(マウスカーソルを当てた画像に対してのみ,Opacityの変化を適用させる)について,
ご教示いただきたく,よろしくおねがいします.
image.png

image.png

発生している問題・エラー

import React, {Component} from 'react';

import './App.css';

class Main extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      // opacity: '1',
      effect:false,
      hovered:false
    }
  }

  onMouseEnterHandler(){
    this.setState({
      hovered: true
    })
  }

  onMouseLeaveHandler(){
    this.setState({
      hovered: false
    })  
  }



  render(){
    const places = [
      {name:'hongkong', image:'/image/hongkong.jpg', opacity:'0.5'},
      {name:'prague', image:'/image/prague.jpg', opacity:'0.5'},
      {name:'croatia', image:'/image/croatia.jpg', opacity:'0.5'},
    ]




    return (
      <div>
        {places.map((place)=>{
          return(
            <div className="text-center">
              <h1>{place.name}</h1>
              <img
                id= {place.name}
                src={place.image} 
                alt={place.name} 
                style={{width:'1000px',opacity:this.state.hovered ? 1:0.5}}
                onMouseEnter={()=>{this.onMouseEnterHandler()}} 
                onMouseLeave={()=>{this.onMouseLeaveHandler()}}

              />
            </div>
          )
        })}
      </div>
    );
  }         
}

export default Main;
0
1
Answer

このファイル内でやりたいかもしれませんが、私ならCSSの方を編集します。

App.css
.text-center:hover { opacity: 0.5; }

ただし、class名がtext-centerでのマウスオーバーがすべて半透明になってしまうので、別途クラスを作って置き換えるのがいいと思います。

MainクラスのonMouseEnterHandler()とonMouseLeaveHandler()で変数hoveredが変更されて、
style={{width:'1000px',opacity:this.state.hovered ? 1:0.5}}の部分のopacity値がすべて同じ値になって返されるのがすべて同じ透明度になってしまう原因だと思います。

1
ありがとうございます!あまりReact内で行うことにこだわりすぎず,CSSで編集していったほうが良さそうですね.
Help us understand the problem. What is going on with this answer?
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login