单击更改图像 \- React

Question

例如，这是我的观点：

 <div>
  <img src='../../minus.png' />
</div>

现在我想在每次点击时将图像从 plus.png 更改为 minus.png 。

因此，单击一次： minus.png => plus.png ，再次单击： plus.png => minus.png ，依此类推。我该怎么做？

原文由 user8608046 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这可以通过一个简单的切换处理程序来实现：

 const imagesPath = {
  minus: "https://images.vexels.com/media/users/3/131484/isolated/preview/a432fa4062ed3d68771db7c1d65ee885-minus-inside-circle-icon-by-vexels.png",
  plus: "https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-big-512.png"
}

class App extends React.Component {
  state = {
    open: true
  }
  toggleImage = () => {
    this.setState(state => ({ open: !state.open }))
  }

  getImageName = () => this.state.open ? 'plus' : 'minus'

  render() {
    const imageName = this.getImageName();
    return (
      <div>
        <img style={{maxWidth: '50px'}} src={imagesPath[imageName]} onClick={this.toggleImage} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

编辑

请注意，我为 setState 传递了一个函数参数，因为我的新状态取决于旧状态。您可以在 文档 中阅读更多相关信息

原文由 Sagiv b.g 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

import React, { useState } from 'react';
import './Bulbs.css';

function Bulb(){

    const bulboff = require('../assets/BulbOff.png');
    const bulbon = require('../assets/BulbOn.png');
    const images = {bulboff,bulbon};
    const [img, setImg] = useState(false);

    const imgChangeHandler = () => {
        if(!img) {
            setImg(true);
        }else{
            setImg(false)
        }
    };
    return(
        <div>
            <img src={!img ? bulboff : bulbon } alt='bulb-off' onClick={imgChangeHandler}/>
        </div>
    )
}

export default Bulb;

原文由 Pankaj Maru 发布，翻译遵循 CC BY-SA 4.0 许可协议