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

【问题标题】：Anchor tag '<a>' not working on first click inside Slick锚标记“<a>”在 Slick 内第一次单击时不起作用
【发布时间】：2020-07-20 08:47:39
【问题描述】：

我在光滑的滑块 (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>

【问题讨论】：

你能把这段代码放在codesandbox上会更容易调试
这段代码有很多依赖，它基本上是一个图像轮播，但我在它周围放置了一个锚标签，这是将锚标签的类从第一次点击本身更改为“链接活动” ，但不适用于第一次点击。无论如何，我将尝试在沙箱中使用滑块和一些图像进行复制:)
codesandbox.io/s/react-slick-playground-kdkrt

标签： reactjs slick.js react-slick

【解决方案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;
    }
};

【讨论】：