做出反应。 换图片 onclick

Question

I'm creating a page with many pictures. If you click on one picture, it should change. I tried to make it with toggling state but it works not the way I want: it changes all the photos if you click on just one.

Then I tried to use this code but it doesn't work at all (it doesn't even log)

 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> ) }

Could you tell me, what's wrong here? Or do you know, how I can make another way?

Answer 1

Here is a working example if this helps

 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" />