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

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

  1. 在链接上设置 onClick 属性。
  2. 每次单击链接时,都会调用我们传递给道具的函数。
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 函数。

事件的 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>
  );
}

如果我们在将函数传递给 onClick 道具时调用该函数,例如 onClick={handleClick()},它会在组件挂载时立即调用。

我们可以使用这种方法在任何其他元素上设置 onClick 属性,例如 button ,span 等。