如何在链接元素的 onClick 触发前调用函数Next.js答案

【问题标题】：How to Call Function Before Link Element's onClick fires | Next.js如何在链接元素的 onClick 触发前调用函数Next.js
【发布时间】：2021-05-05 23:16:58
【问题描述】：

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

所以滑块中的每个元素（如下所示）都被包裹在 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 处理程序运行之前运行函数？

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

你可以定义一个不同于Link的自定义组件，并在其上实现onClick props

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

【讨论】：