Programming has never been easy. There are programs that will have many different constructions. A good programmer will find the best way to make their project run with the best results. Today, we will introduce a new situation. This article will help you answer the question Is it okay to call onClick on an anchor tag in ReactJS? Let’s follow along!

When Do You Get The Problem “Is it okay to call onClick on an anchor tag” In ReactJS?

In this example, the writer’s goal is to create a command so that when someone clicks on the article link, they will automatically switch to another page. And they’re not sure if it’s okay to use onClick.

Here’s a pre-built program, the coders added the link tag “anchor”  in their component:

class myComponent {

   render () {
       return (
           <a href="/link/to/other/page">Link</a>
       );
   }
}

And this is the goal of the coder, when someone clicks on the link, they can be redirected to another page. The command line you use is as follows:

analytics.submitData({event: "page redirection"});

There are two situations that have happened, you are not sure how to use this method:

anchorClickHandler() { 
    analytics.submitData({event: "page redirection"}); 
}

Or this way would be more reasonable:

<a href="/link/to/other/page" onClick={this.anchorClickHandler.bind(this)}>Link</a>

Solutions For The Error “Call onClick on an anchor tag” In ReactJS

Option 1: Create a new command with “Span” like this

Here we will give you the best guide.

First, create a new command with “Span” like this:

<span className='sub' onClick={this.anchorClickHandler}>Link</span>

Next, set more conditions for them, you can use Cascading Style Sheets:

.sub { 
    cursor: pointer,
    color: blue 
}

Finally, follow the steps below and check if your program is running as you intended:

anchorClickHandler = event => {
    analytics.submitData({event: "page redirection"}); 
    // Navigate to /link/to/other/page 
    window.location.href = '/link/to/other/page'; 
}

Option 2: Follow this guide

Excepting the solution mentioned above, there is another solution which helps you handle with the problem “call onClick on an anchor tag” in ReactJS. Let’s follow this guide:

The anchor tag isn’t calling the onClick function issue in React.

You can use e.preventDefault in your click event handler method to resolve the React problem where the anchor tag isn’t running the onClick function. For instance:

import React from "react";

export default function App() {
  const onClick = (e) => {
    e.preventDefault();
    console.log("clicked");
  };

  return (
    <a href="https:/example.com" onClick={onClick}>
      click me
    </a>
  );
}

To avoid the default behavior of navigating to the page with the URL entered as the value of the href property, you need to add the onClick function, e.preventDefault.

The onClick prop of an element is then assigned to the onClick function.

As a result, when you click on the link, you see ‘clicked’ logged in the console instead of navigating to https://example.com.

Conclusion

The above article has given you the solution for Call onClick on an anchor tag in ReactJS. Hope you will soon find a method that works for you. Besides this article, we also give a lot of other common situations while programming, if you are interested, please click to follow it for more ways to handle errors when necessary. In addition, if you have any questions or difficulties, do not hesitate to contact us immediately for answers.

Read more

→ Resolve The Error: react devtools console.log() from react_devtools_backend.js:4049 in Reactjs