小知识点:ts 给a标签 添加 disabled属性。

872 阅读1分钟

在日常开发中,我们需要使用a标签实现某些功能。有时会把a标签做成button样式,需要在标签中使用disabled属性完成特定的的业务场景,但a标签加入disabled属性只能使按钮变成灰色,不能禁用其原有的点击事件。即还是可以触发a的点击事件。

<a></a>标签本身不支持disabled,所以简单设置了disabled属性是没有任何效果的。

所以如果想在a标签中使用disabled属性的话可以使用如下方式:

  1. 语言: ts,
  2. flag: 禁用a标签 的先决条件,
  3. pointer-events:指针属性(重要属性,自行查阅了解),
 <a
   style={{pointer-events: flag ? 'none': undefined, color: flag? '#b8b8b8':'#29BECE'}} // 控制a标签禁用 相当于 disabled
 onClick={() => detailLink(record, 'node')}
 >
   点击事件     
 </a>

效果:

image.png