如何在 React 中禁用链接

作者

在 React 中禁用链接

How to disable a Link in React

将指针事件 CSS 属性设置none为禁用 React 中的链接，例如
<Link style={{pointerEvents: 'none'}}>. 当链接的指针事件属性设置为none时，链接被禁用。

应用程序.js
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，这与语句非常相似。

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

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

应用程序.js
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()上的方法来禁用链接event。

应用程序.js
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>
  );
}

禁用链接事件防止默认

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

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

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

您可以向这两个链接添加内联样式，使用户更容易知道链接何时禁用以及何时激活。

应用程序.js
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>
  );
}

–

发表评论