Question

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

然后我尝试使用此代码，但它根本不起作用（甚至无法登录）

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

    }

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

Answer 1

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

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

反应更改图片onclick

1 个答案: