ReactJS onClick .next() элемент с тем же классом?

Question

Я новичок в 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> 

Что бы правильный путь, что, когда я нажимаю portfolioNext DIV я смог бы дать класс Img2 из activeImg и удалить его из предыдущего элемента и так далее в ReactJS?

Спасибо!

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 более декларативный характер.

Вместо того, чтобы пытаться найти следующий элемент с классом, используйте состояние, чтобы поддерживать список этих элементов вместе с указательным курсором.

// 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> 
); 

Чтобы изменить активное изображение, используйте setState изменить cursor свойство.

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

this.setState({ cursor: nextCursor });