javascript - React-router:如果 处于事件状态，如何禁用它？

Question

如何禁用 <Link>在react-router中，它的URL是否已经激活？例如。如果我的 URL 在点击 <Link> 时不会改变我想完全阻止点击或渲染 <span>而不是<Link> .

我想到的唯一解决方案是使用 activeClassName (或 activeStyle )并设置 pointer-events: none; ，但我宁愿使用适用于 IE9 和 IE10 的解决方案。

Answer 1

您可以使用 CSS 的 pointer-events 属性。这适用于大多数浏览器。例如你的 JS 代码:

class Foo extends React.Component {
  render() {
    return (
      <Link to='/bar' className='disabled-link'>Bar</Link>
    );
  }
}

和CSS:

.disabled-link {
  pointer-events: none;
}

链接:

• pointer-events CSS property
• How to disable HTML links

How to disable HTML links所附答案建议同时使用 disabled 和 pointer-events: none 以获得最大程度的浏览器支持。

a[disabled] {
    pointer-events: none;
}

来源链接:How to disable Link