如何在 React 中禁用链接

在 React 中禁用链接

将 pointer-events CSS 属性设置为none禁用 React 中的链接。

当链接的 pointer-events 属性设置为 时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语句非常相似。

如果问号左边的值为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()上的方法来禁用链接event。

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()，链接被禁用。

添加内联样式到禁用链接

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

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>
  );
}

总结

当你用脚本到一半却发现自己用的方法很拙劣时，请不要马上停手；请尽快将余下的部分粗略的完成以保证这个代码的完整性，然后分析自己的错误并重新编写和工作。

每天进步一小步，加油