在 React 中的链接上设置 onClick 监听器

React 2年前 29

要在 React 中的链接上设置 onClick 监听器：

在链接上设置 onClick 属性。
每次单击链接时，都会调用我们传递给道具的函数。

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

export default function App() {
  const handleLinkClick = event => {
    console.log('Link clicked');

    // ?️ refers to the link element
    console.log(event.currentTarget);
  };

  const handleAnchorClick = event => {
    // ?️ use event.preventDefault() if you want to
    // prevent navigation
    // event.preventDefault();

    console.log('Anchor element clicked');

    // ?️ refers to the link element
    console.log(event.currentTarget);
  };
  return (
    <Router>
      <div>
        {/* ?️ react router link */}
        <Link onClick={handleLinkClick} to="/about">
          Go to About
        </Link>

        <br />
        <br />

        {/* ?️ Anchor link */}
        <a
          onClick={handleAnchorClick}
          href="https://www.zadmei.com"
          target="_blank"
          rel="noreferrer"
        >
          zadmei.com
        </a>
      </div>
    </Router>
  );
}

代码片段展示了如何在 React 路由 Link 或锚元素上设置 onClick 事件监听器。

每次单击链接时，都会调用 handleClick 函数。

如果我们需要访问 handleClick 函数中的链接元素，请访问事件对象的 currentTarget 属性。

事件的 currentTarget 属性使我们能够访问事件侦听器附加到的元素。

而事件的目标属性为我们提供了对触发事件的元素的引用（可能是后代）。

如果要将参数传递给 handleClick 函数，请将 onClick 属性设置为内联箭头函数。

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

export default function App() {
  const handleLinkClick = (event, message) => {
    console.log('Link clicked');
    console.log(message);
  };

  const handleAnchorClick = (event, message) => {
    // 👇️ use event.preventDefault() if you want to
    // prevent navigation
    // event.preventDefault();

    console.log('Anchor element clicked');
    console.log(message);
  };
  return (
    <Router>
      <div>
        {/* 👇️ react router link */}
        <Link onClick={event => handleLinkClick(event, 'hello')} to="/about">
          Go to About
        </Link>

        <br />
        <br />

        {/* 👇️ Anchor link */}
        <a
          onClick={event => handleAnchorClick(event, 'world')}
          href="https://www.zadmei.com"
          target="_blank"
          rel="noreferrer"
        >
          zadmei.com
        </a>
      </div>
    </Router>
  );
}