React技巧之设置onClick监听器

React 1年前 262

总览

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

在链接上设置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://google.com"
          target="_blank"
          rel="noreferrer"
        >
          Google.com
        </a>
      </div>
    </Router>
  );
}

React技巧之设置onClick监听器

上述代码片段向我们展示了，如何在React router的Link组件，以及锚点元素上设置onClick事件监听器。

每当链接被点击时，handleClick函数将会被调用。

如果需要在handleClick 函数中访问链接元素，可以通过访问event对象上的currentTarget属性来获得。

event对象上的currentTarget 属性，使我们能够访问事件监听器所附加的元素。而event上的target属性，为我们提供了触发事件的元素的引用(可能是后代元素)。

如果你想为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://google.com"
          target="_blank"
          rel="noreferrer"
        >
          Google.com
        </a>
      </div>
    </Router>
  );
}