如何在React中禁用链接？

禁用 React 中的链接

将指针事件 CSS 属性设置为 none 以禁用 React 中的链接。

当链接的指针事件属性设置为 none 时，链接将被禁用。

import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <Router>
      <div>
        <Link style={{pointerEvents: count === 0 ? '' : 'none'}} to="/">
          Home
        </Link>

        <br />
        <br />

        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </Router>
  );
}

效果如下：

当用户单击按钮时，链接元素的指针事件属性设置为 none，并且链接被禁用。

当然我们也可以使用相同的方法禁用锚点元素，因为在底层，链接组件实际上只是一个＜a＞标记。

该示例使用了一个三元运算符，它与 if/else 语句非常相似。

如果问号左侧的值为 true，则运算符将返回冒号左侧的值，否则将返回冒号右侧的值。

通过呈现不同的元素禁用链接

禁用链接的另一种方法是，如果满足条件，则简单地呈现不同的元素而不是链接。

import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <Router>
      <div>
        {count === 0 ? (
          <Link to="/">
            Home
          </Link>
        ) : (
          <span>Home</span>
        )}

        <br />
        <br />

        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </Router>
  );
}

效果如下：

这一次，如果满足某个条件，我们将呈现一个 span 元素，而不是链接。

这不一定是一个 span，它可以是适合您的用例的任何其他元素。

本例还使用了三元运算符——如果 count 变量等于 0，则呈现链接，否则呈现 span 标记。

使用 event.preventDefault 禁用链接

或者，您可以通过向元素添加 onClick 道具并在事件对象上调用 preventDefault()方法来禁用链接。

import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <Router>
      <div>
        {count === 0 ? (
          <Link to="/about">About</Link>
        ) : (
          <Link to="/about" onClick={event => event.preventDefault()}>
            About
          </Link>
        )}

        <br />
        <br />

        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </Router>
  );
}

效果如下：

我们在第二个 Link 元素中添加了一个 onClick 事件处理程序。

事件对象上的 preventDefault 方法告诉浏览器不应执行其默认操作。

单击链接时的默认操作是导航到其他页面。通过调用preventDefault()，链接被禁用。

将内联样式添加到“禁用”链接

您可以向这两个链接添加内联样式，以便用户更容易地了解链接何时被禁用以及何时处于活动状态。

import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <Router>
      <div>
        {count === 0 ? (
          <Link to="/about">About</Link>
        ) : (
          <Link
            style={{pointerEvents: 'none', textDecoration: 'none'}}
            to="/about"
            onClick={event => event.preventDefault()}
          >
            About
          </Link>
        )}

        <br />
        <br />

        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </Router>
  );
}

效果如下：

结语

以上就是关于如何在 React 中禁用链接的实现方法，希望对大家有用。