Question

您好我试图制作一个图像更换器。在第一次加载时，我应该显示状态中的第一张图像。如果单击按钮，图像应更改为秒，依此类推。现在的问题是用按钮显示两个图像

Answer 1

因为您在渲染器中显示2图像。

这是一个想法如何去做（没有动画，我不知道CSSTransitionGroup组件）。只需用以下

替换main.js代码即可

import React from 'react'
import {render} from 'react-dom'
import { CSSTransitionGroup } from 'react-transition-group'



class FadeImage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      images: [
        'http://via.placeholder.com/350x150',
        'http://via.placeholder.com/350x151'
      ],
      currentImage: 0
    };
  }

  fadeImage(e) {
    e.preventDefault();
    this.setState({currentImage: (this.state.currentImage + 1) % this.state.images.length})
  }

  render() {
    return (
            <div className="image">
      <CSSTransitionGroup
        transitionName="example"
        transitionEnterTimeout={300}
        transitionLeaveTimeout={300}
        >
          <section>
            <button className="button" onClick={this.fadeImage.bind(this)}>Click!</button>
            <img src={this.state.images[this.state.currentImage]}/></section>
        </CSSTransitionGroup>
        </div>
      );
    }
  }


render(<FadeImage />, document.querySelector('#app'))

Answer 2

http://bl.ocks.org/piotrf/1b7b14b0c2bfbfe1f1ef这几乎就是你想要的。你可以摆脱你不需要的部分，并将按钮更改为你想要的图像

ReactJS点击加载图片

2 个答案: