Обработчик Onclick не работает на карусели нескольких изображений - PullRequest
3 голосов
/ 18 июня 2019

Карусель с несколькими изображениями работает довольно хорошо, но я бы хотел добавить обработчик события onClick для каждого изображения в карусели и отобразить его в верхней части карусели, чтобы он работал только для 1-го элемента каждого слайда, а не для оставшихся элементов в активном слайде.

Я реализовал это, настроив карусель из нескольких изображений. Посмотрите код ниже.

interface imgprops {
    AdListItem: any;
}
class Imageslide extends Component<imgprops, any> {

    constructor(props: any) {
        super(props);
        this.state = { imgsrc: this.props.AdListItem[0].src };

    }
    componentDidMount() {

        $('.multi-item-carousel .item').each(function(){
            var next = $(this).next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));

            for (var i=0;i<2;i++) {
                next=next.next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }

            next.children(':first-child').clone().appendTo($(this));
            }
        });
    }

    public DisplayImage(details: any) {
        debugger;
        this.setState(
            this.state = { imgsrc: details.src }
        );
        console.log(this.state);
    }
    render() {
        debugger;

        return (
            <div className="ms-Grid-row">
                <div className="card">
                    <div className='ProdImgView'>
                        <img src={this.state.imgsrc} alt="avengers" className='prodimg' />

                        <div className="prodprize">
                            <p className="card-prize"><i className="fas fa-rupee-sign"></i>{this.props.AdListItem.prize}</p>
                        </div>
                    </div>
                </div>
                <div className="ms-Grid-col ms-sm6 ms-md4 ms-lg12 ImageslideMainDiv">
                    <div className="carousel slide multi-item-carousel" id="theCarousel">
                        <div className="carousel-inner">
                            <div className="item active">
                                <div className="ms-Grid-col ms-sm3"><img src={this.props.AdListItem[0].src} className="img-responsive" onClick={() => { debugger; this.DisplayImage(this.props.AdListItem[0]) }} /></div>
                            </div>
                            {this.props.AdListItem.map((items: any) =>
                                <div className="item">
                                    <div className="ms-Grid-col ms-sm3"><img src={items.src} className="img-responsive" onClick={() => { debugger; this.DisplayImage(items) }} /></div>
                                </div>
                            )}

                        </div>
                        <a href="#theCarousel" className="left carousel-control left" data-slide="prev">
                            <i className="fas fa-chevron-left ChevronIcon"></i>
                        </a>
                        <a href="#theCarousel" className="right carousel-control right" data-slide="next">
                            <i className="fas fa-chevron-right ChevronIcon"></i>
                        </a>
                    </div>
                </div>
            </div>
        );

    }
}

function mapStateToProps(state: any) {
    return {
        AdListItem: state.AdList
    };
}

export default connect(mapStateToProps, undefined)(Imageslide);

Я хочу визуализировать каждый элемент, который нажимается на вершину карусели. но только каждый 1-й элемент карусели работает правильно, кто-то может понять это для меня.

1 Ответ

1 голос
/ 18 июня 2019

Вы должны привязать свою функцию к компоненту, тогда проблема будет решена.

Добавьте следующую строку в конструктор,

constructor(props: any) {
        super(props);
        this.state = { imgsrc: this.props.AdListItem[0].src };

        // New line
        this.DisplayImage = this.DisplayImage.bind(this);
    }
...