ReactJS onClick同じクラスの.next（）要素ですか？

Question

私はReactJSを初めて使用しています。私は、同じクラスの次の要素を反応させるための正しい方法は何でしょうか？私はportfolioNext div要素をクリックしたときに、私はactiveImgのIMG2クラスを与え、ReactJSにように前の要素からそれを削除し、できるようになることを正しい方法だろう何

<div className="portfolioGallery"> 
    <img className="portfolioImg activeImg" src="img/1.png"/> 
    <img className="portfolioImg" src="img/2.png"/> 
    <img className="portfolioImg" src="img/2.png"/> 
    <div className="portfolioNext" onClick={this.nextImg.bind(this)}> 
    Next image 
    </div> 
</div> 

？

ありがとうございました！

constructor() { 
    super(); 
    this.state = { 
     default: "portfolioImg activeImg" 
    }; 
} 

nextImg() { 
    this.setState({ 
     default: "portfolioImg" 
    }); 
} 

Answer 1

私はあなたがお互いを見つけるの兄弟と考える提案が、代わりに現在の子どものインデックスを格納し、親として、それの事、そして代わりに更新ことではないでしょう。

this.props（またはthis.state）は、このような何か（擬似コード）

this.props.images => ["img/1.png", "img/2.png", "img/2.png"]; 

インサイドレンダリングだろう。もちろん

<div className="portfolioGallery"> 
    {this.props.images.map((image, i) => active === i ? (<img className="portfolioImg activeImg" src="image" key={i}/>) : (<img className="portfolioImg " src="image" key={i}/>))} 
    <button className="portfolioNext" onClick={(e) => this.setState({active: this.state.active + 1}).bind(this)}>Next image</button> 
</div> 

を、ときactive >= images.lengthを占めていますが、アイデア

Answer 2

を取得します

これは、jQueryコードで一般的に見られるような必須の技法ですが、Reactのslighにはあまりうまくマッピングされませんより宣言的な性質を持っています。

クラスを持つ次の要素を検索するのではなく、状態を使用して、インデックスカーソルの横にある要素のリストを維持します。

// constructor 
this.state = { 
    images = ['img/1.png', 'img/2.png', 'img/3.png'] 
    cursor: 0 
}; 

次に、これらのビットのデータを使用して表示します。

// render 
const { images, cursor } = this.state; 
return (
    <div> 
    {images.map((src, index) => { 
     const activeClass = (index === cursor) ? 'activeImg' : ''; 
     return <img className={`portfolioImg ${activeClass}`} />; 
    }} 
    </div> 
); 

cursorプロパティを変更するsetStateを使用して、アクティブな画像を変更します。

// nextImg 
const { cursor, images } = this.state; 
const nextCursor = cursor % images.length; 

this.setState({ cursor: nextCursor });