クリックすると画像が表示されます

Question

こんにちは私はイメージチェンジャーを作ろうとしています。最初の負荷では、私は状態の最初の画像を表示する必要があります。ボタンをクリックすると、画像が2番目のように変更されます。今ここにボタン

で両方の画像を表示しますされる問題は、私のビンです：enter link description here

Answer 1

あなたのレンダラに2画像を表示するので。

私はどのようにそれを行うのか考えています（アニメーションなしでは、私はCSSTransitionGroupコンポーネントを知りません）。ただ、これはほぼ正確に何をしたいです

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以下のごmain.jsコードwiththeを交換してください。あなたはあなたが必要としない部分を取り除き、あなたが望む画像にボタンを変えることができます