Ведение индекса множественного реагирования - PullRequest
Новая
       8

Ведение индекса множественного реагирования

0 голосов
/ 14 мая 2018

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

render() {
            var settings = {
            arrows: true,
            infinite: false,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            afterChange: function(currentSlide){
            this.setState({
            currentSlide: currentSlide
        })
            console.log(currentSlide);
        }.bind(this)
        };
            return (

            <div className="main-wrapper">

            {/*carousel responsive1*/}

            {this.state.users.map((item,i)=>{
                return  <div className="main-wrapper-mobile">
                    <div className="carousel responsive1">
                        <div className="mask">
                            {/*slideset */}
                            <div className="slideset">
                                {/*slide*/}

                                <Slider {...settings}>
                                    {item.activities.map((item1,i)=>{
                                        return <div className="slide">
                                            <div className="content__item d-flex">

                                                <div className="content__photo">
                                                    <img className="content__img" src={item.image_url}/>
                                                </div>
                                                <div className="article">
                                                    <p className="article__text">{item.comment_text}</p>
                                                    <ul className="article__controls">
                                                        <li className="article__control-item"><a href="#">visual <i
                                                            className="fa fa-eye" aria-hidden="true"></i></a></li>
                                                        <li className="article__control-item"><a href="#">text <i
                                                            className="fas fa-comment-dots"></i></a></li>
                                                        <li className="article__control-item"><a href="#">edited <i
                                                            className="fas fa-edit"></i></a></li>
                                                    </ul>
                                                    <div className="article__icon">
                                                        <a href="#" className="article__icon--blue"> <i
                                                            className="fa fa-check-circle" aria-hidden="true"></i></a>
                                                        <a href="#" className="article__icon--gray"><i
                                                            className="fa fa-minus-circle" aria-hidden="true"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    })}

                                </Slider>
                            </div>
                        </div>

Краткое объяснение вышеуказанного кода:

У меня есть массив пользователей. Каждому пользователю назначается слайдер. Вот почему я отображаю массив пользователей и рендеринг в каждом отображении.

В настоящее время параметр «currentSlide» в «settings» устанавливает состояние «currentSlide» на значение currentSlide. Проблема заключается в одинаковом изменении состояния всех ползунков. Нет способа отследить, какой слайдер получает слайд. Я должен быть в состоянии изменить или поддерживать слайдер и соответствующий ему индекс. Как мне это сделать?

...