javascript - Onclick 处理程序不适用于多个图像轮播

Question

多图像轮播工作得很好，但我想将 onClick 事件处理程序添加到轮播中的每个图像并将其呈现在轮播的顶部并且它仅适用于每张幻灯片的第一个元素而不适用于其余元素在事件幻灯片中。

我是通过自定义多图轮播来实现的，看看下面的代码。

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

我想渲染每个被点击的元素到旋转木马的顶部。 但只有轮播的每一个元素都以正确的方式工作，有人可以帮我解决吗。

Answer 1

您必须将您的功能绑定(bind)到组件，然后问题才会得到解决。

将下面这行添加到构造函数中，

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

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