在日常开发中,我们需要使用a标签实现某些功能。有时会把a标签做成button样式,需要在标签中使用disabled属性完成特定的的业务场景,但a标签加入disabled属性只能使按钮变成灰色,不能禁用其原有的点击事件。即还是可以触发a的点击事件。
<a></a>标签本身不支持disabled,所以简单设置了disabled属性是没有任何效果的。
所以如果想在a标签中使用disabled属性的话可以使用如下方式:
- 语言: ts,
- flag: 禁用a标签 的先决条件,
- pointer-events:指针属性(重要属性,自行查阅了解),
<a
style={{pointer-events: flag ? 'none': undefined, color: flag? '#b8b8b8':'#29BECE'}} // 控制a标签禁用 相当于 disabled
onClick={() => detailLink(record, 'node')}
>
点击事件
</a>
效果: