使用 Ant Design UI 库禁用 <a> 标签答案

【问题标题】：Disabling <a> tag using Ant Design UI Library使用 Ant Design UI 库禁用 <a> 标签
【发布时间】：2021-09-30 09:59:57
【问题描述】：

有没有办法使用 antd UI 库禁用链接？根据 MDN disabled 属性不支持 a 标签。以下实现在使用 React 时确实有效，但在使用 Next.js 时，链接仍然是可点击的。

<Tooltip title={tooltip}>
 <a onClick={handleAddToCart} disabled={quantity < 1}>
   <ShoppingCartOutlined className="text-danger" /> <br />
   {quantity < 1 ? 'Out of stock' : 'Add to Cart'}
 </a>
</Tooltip>

【问题讨论】：

标签： javascript html next.js antd

【解决方案1】：

disabled 确实不是链接的属性，因为禁用的链接只是文本。

如果你仍然想要一个禁用的链接，那么你必须做两件事

在 onClick 处理程序被禁用时删除它（或让 handleAddToCart 不做任何事情）
然后以“禁用”的方式设置组件的样式。

这是一个例子

const isOutOfStock = quantity < 1;

return (
  <Tooltip title={tooltip}>
   <a onClick={isOutOfStock ? null : handleAddToCart} className={isOutOfStock ? 'isDisabled' : ''}>
     <ShoppingCartOutlined className="text-danger" /> <br />
     {isOutOfStock ? 'Out of stock' : 'Add to Cart'}
   </a>
  </Tooltip>
)

那么你禁用的 css 可以是这样的

.isDisabled {
  pointer-events: none; // disabled click & hover
  opacity: 0.6; // make it a bit opaque
}

【讨论】：

【解决方案2】：

另外，由于您使用的是 Ant Design，您可以使用来自 Typography 的 Link 组件并添加一个 disabled 属性。无需编写自定义 CSS。

import { Typography } from 'antd'

<Typography.Link href="https://ant.design" disabled>disabled link<Typography.Link>

【讨论】：