反应。更改图片onclick

问题描述 投票:0回答:1

我正在创建一个包含许多图片的页面。如果单击一张图片,它应该会改变。我试图以切换状态进行设置,但它的工作方式与我想要的方式不同:如果仅单击其中的一张,它将更改所有照片。

然后我尝试使用此代码,但是它根本不起作用(甚至无法记录)

import bag1 from "../../img/bag1.jpg"

onClickHandler = (e) => {
        let src = (e.target.src || e.srcElement.src);
            if(src=={bag0}) {
            console.log("It works")
        }
    }


 render(){
        return(
      
            <div className="main">
              <img onClick={this.onClickHandler} src={bag0}/>
              </div>
        )

    }

你能告诉我,这是怎么了?还是您知道,我该怎么做?

javascript reactjs
1个回答
0
投票

如果有帮助,这里是一个有效的例子

class App extends React.Component { 
  constructor(props) {
    super(props);
    this.defaultImage = 'https://cdn0.iconfinder.com/data/icons/30-hardware-line-icons/64/Search-64.png';
  
    this.state = {
      selectedImage: this.defaultImage,
    }

    this.onClickHandler = this.onClickHandler.bind(this);
  }

  onClickHandler(e) {
    const src = e.target.src;
    if(src === this.defaultImage) {
        this.setState({ selectedImage: 'https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-64.png' });
    }
  }

 render() {
     return(<div className="main">
     <img onClick={this.onClickHandler} src={this.state.selectedImage} />
              </div>);
    }
}

ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
© www.soinside.com 2019 - 2024. All rights reserved.