如何在链接元素的 onClick 触发之前调用 Function | Next.js

Question

所以我在制作滑块/旋转木马时遇到了问题。 我在每个 slider 中都有照片，应该可以来回拖动，然后单击时，它们会将您带到产品页面。 为此，我使用 next.js 和react-flickity-component 。 注意：此问题并非特定于 flickity。

因此，slider 中的每个元素（如下所示）都包含在 nextjs 链接组件中。 但是在拖动元素后，点击事件会触发并错误地将用户带到产品页面。 该链接仅在单击时才有效，而无需拖动。 如果轻弹拖动事件触发，我想以某种方式禁用 onClick 处理程序。 我只是不知道 Link 组件知道如何禁用它。

我可以查询 flickity 以查看拖动何时开始，因此我正在寻找一种方法来有条件地禁用 onclick 或更改Link组件的 onClick 事件。

        <Link href={href}>
            <div className={`carousel-cell ${cardStyles.card} ${className || ''}`}>
                <div className={cardStyles.tabVisualEffect} tabindex="0">
                    <Image src={imgUrl} className={"carousel-image"} layout="fill" />
                    <div className={cardStyles.overlayContainer}>
                        <div className={cardStyles.arrowContainer}>

                        </div>
                        <div className={cardStyles.titleContainer}>
                            <h3 className={cardStyles.cardTitle}>{title}</h3>
                            <h4 className={cardStyles.cardSubTitle}>{subtitle}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </Link>

我的问题是如何在Link元素 onClick 处理程序运行之前运行 function ？

Answer 1

您可以定义一个不同于Link的自定义组件并在其上实现onClick道具

<CustomButton onClick={() => {
  foo();
  router.push('/bar')
}}>
 . . .
</CustomButton>