How do i make onClick and href work together?

Question

I have an a element which has his own href and it works perfectly. The problem is that besides an href element i want to make an onClick function, but when i do so, the href is ignored:

<li><a href="#someSectionOfThePage" onClick={someFunction}>GO TO SECTION</a></li>

Using this syntax, the someFunction runs, but i'm not being redirected to #someSectionOfThePage .

Answer 1

This should do the trick:

<li onClick={someFunction}>
   <a href="#someSectionOfThePage">GO TO SECTION</a>
</li>

When you click the <li> it will execute the function... and when you click the <a> it will process the href . Since you'll be clicking this element, both will work the same time.

Answer 2

The href present in the a tag is not going to work because of the onClick event. After clicking the element, instead of redirecting you to the section of the page, it executes someFunction() . You may try adding location.href = "#someSectionOfThePage" to someFunction() which will do the work of href .

Answer 3

您也可以尝试为li添加一个click event处理程序，并确保li和anchor标签a width相同。

Answer 4

Although it is not advisable but if you still want to use both then this might do the trick:

someFunction= ()=>{
  window.location.href("#someSectionOfThePage");
  //do your onClick stuff here
};

<li>
  <span onClick={this.someFunction}>GO TO SECTION</span>
</li>

Hope this helps!!