时间戳

首页 > 解决方案 > 单击更改图像 - 反应

javascript - 单击更改图像 - 反应

问题描述

例如，这是我的观点：

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

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

因此，单击一次：minus.png => plus.png，再次单击：plus.png => minus.png，依此类推。我怎样才能做到这一点？

标签： javascripthtmlreactjs

解决方案

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

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因为我的新状态取决于旧状态。您可以在文档中阅读更多相关信息

推荐阅读