锚标记“<a>”在 Slick 内第一次点击时不起作用

Question

我在 slick slider (React-Slick) 中放置了一个锚标签，它在第一次点击时不起作用，但在第二次点击之后，这是针对每个图像的。代码：

<MediaQuery query={`(max-device-width: ${belowIpadBreakPoint}px)`}>
                <Slider className="marketing-carousel__body" {...settings}>
                    {objectPath.has(this.state, 'config.content.images') &&
                        this.state.config.content.images.map((item, index) => {
                            return (
                                <div key={index.toString()} className="marketing-carousel__body_image">
                                     { this.state.config.content.ctaLink ?
                                        <a href={this.state.config.content.ctaLink} target={this.state.config.content.ctaTarget} id="marketing-carousel-mobile-link">
                                            <Picture
                                                sources={item.sources}
                                                defaultSrc={item.defaultSrc}
                                                isLazyLoad={item.isLazyLoad}
                                                altText={item.altText}
                                                customClass={item.customClass}
                                            />
                                        </a>
                                        :
                                        <Picture
                                                sources={item.sources}
                                                defaultSrc={item.defaultSrc}
                                                isLazyLoad={item.isLazyLoad}
                                                altText={item.altText}
                                                customClass={item.customClass}
                                        />
                                    }
                                </div>
                            );
                        })}
                </Slider>

Answer 1

所以我自己修复了它。这就是我所做的：

  <a href={this.state.config.content.ctaLink} target={this.state.config.content.ctaTarget} onClick={(e) => this.openLinks(e)}>

我放置了一个 onClick 侦听器并创建了一个函数。这似乎已经解决了问题，这是 slick.js.

的一个现有问题

  openLinks = (event) => {
    event.preventDefault();
    if (event.currentTarget.target === '_blank') {
        window.open(event.currentTarget.href, event.currentTarget.target);
    } else {
        window.location = event.currentTarget.href;
    }
};

锚标记“<a>”在 Slick 内第一次点击时不起作用

Anchor tag '<a>' not working on first click inside Slick

reactjs

slick.js

react-slick