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

Question

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

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

Answer 1

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

如果您仍然想要一个残障人士 link 那么您必须做两件事

在禁用时删除 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
}

Answer 2

或者，由于您使用的是 Ant Design，您可以利用 Typography 中的 Link 组件并添加 disabled 道具。无需编写自定义 CSS.

import { Typography } from 'antd'

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

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

Disabling <a> tag using Ant Design UI Library

html

javascript

next.js

antd