迹忆客 专注技术分享

将指针事件 CSS 属性设置为 none 以禁用 React 中的链接，例如 <Link style={{pointerEvents: '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>
  );
}

当用户单击按钮时，链接元素的 pointer-events 属性设置为 none 并且链接被禁用。

我们可以使用相同的方法来禁用锚元素，因为在底层，Link 组件实际上只是一个 <a> 标记。

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

如果问号左边的值为真，则运算符返回冒号左边的值，否则返回冒号右边的值。

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

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 元素而不是一个链接。

这不一定是跨度，它可以是适合我们的用例的任何其他元素。

这个例子也使用了一个三元运算符——如果 count 变量等于 0，我们渲染一个链接，否则渲染一个 span 标签。

或者，我们可以通过向元素添加 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 中禁用按钮