ReactJS onClick. Next() Element mit derselben Klasse?

Question

Ich bin neu in ReactJS und ich frage mich, was ist der richtige Weg nächstes Element mit derselben Klasse reagieren zu zielen?

<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> 

Was wäre die richtige Art und Weise sein, dass, wenn ich die portfolioNext div klicken würde ich in der Lage sein, die img2 Klasse von activeImg zu geben und sie aus dem vorherigen Elemente entfernen und so weiter in ReactJS?

Vielen Dank!

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

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

Answer 1

Ich würde Sie es als Geschwister nicht vorschlagen denken, sie zu finden, sondern, was es als die Eltern einen Index der aktuellen Kinder Speicherung und Aktualisierung statt, die.

this.props (oder this.state) wäre so etwas wie dieses (Pseudo-Code) haben

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

Innen machen:

<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> 

Natürlich entfallen, wenn active >= images.length, aber Sie bekommen die Idee

Answer 2

Das ist die Art von imperativer Technik, die Sie normalerweise im jQuery-Code finden, aber es ist nicht sehr gut zu React's sligh mehr deklarative Natur.

Anstatt zu versuchen, das nächste Element mit einer Klasse zu finden, verwendet Staat eine Liste dieser Elemente neben einem Index Cursor zu halten.

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

Verwenden Sie dann diese Daten, um Ihre Ansicht zu rendern.

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

Um das aktive Bild zu ändern, verwenden setState die cursor Eigenschaft zu ändern.

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

this.setState({ cursor: nextCursor });