JIYIK CN >

onClickTo set a listener on a link in React :

1. Set the property on the link onClick.
2. Every time a link is clicked, the function we passed to the props will be called.

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.jiyik.com"
          target="_blank"
          rel="noreferrer"
        >
          jiyik.com
        </a>
      </div>
    </Router>
  );
}

The code snippet shows how to set an event listener on a React router Link or anchor element .onClick

Each time a link is clicked, handleClickthe function is called.

If we need to access handleClickthe linked element within the function, access currentTargetthe property of the event object.

The event's currentTargetproperty gives us access to the element to which the event listener is attached.

And the target property of the event gives us a reference to the element (possibly a descendant) that triggered the event.

If you want to pass arguments to handleClickthe function, onClickset the property to an inline arrow function.

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.jiyik.com"
          target="_blank"
          rel="noreferrer"
        >
          jiyik.com
        </a>
      </div>
    </Router>
  );
}

请注意, we pass a function to onClickthe property, rather than the result of a call.

If we call the function when passing it to the onClick prop, for example onClick={handleClick()}, it will be called immediately when the component mounts.

We can use this approach to set the property on any other element onClick, such as button, spanetc.