如何在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 中禁用链接的实现方法，希望对大家有用。

以上关于如何在React中禁用链接？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。