在 react 中的链接上设置 onclick 监听器-ag捕鱼王app官网

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

请注意 ，我们将一个函数传递给 onclick 属性，而不是调用的结果。

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

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