我如何使 onClick 和 href 一起工作？

【问题标题】：How do i make onClick and href work together?我如何使 onClick 和 href 一起工作？
【发布时间】：2019-10-13 05:44:09
【问题描述】：

我有一个a 元素，它有他自己的href，它工作得很好。问题是除了href 元素之外，我还想创建一个onClick 函数，但是当我这样做时，href 会被忽略：

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

使用这种语法，someFunction 运行，但我没有被重定向到#someSectionOfThePage。

【问题讨论】：

你为什么要这样做呢？其背后的主要思想是什么？
请附上someFunction 代码。
为了实现你想要的，你可能想尝试使用
元素上的函数并离开 ...

HTML tag <a> want to add both href and onclick working的可能重复

someFunction 是做什么的？可以加代码吗？

标签： javascript reactjs

【解决方案1】：

由于onClick 事件，a 标签中的href 将不起作用。单击元素后，它不会将您重定向到页面部分，而是执行someFunction()。您可以尝试添加 location.href = "#someSectionOfThePage" 到someFunction()，它将完成href的工作。

【讨论】：

【解决方案2】：

这应该可以解决问题：

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

当你点击<li>时，它会执行函数……当你点击<a>时，它会处理href。由于您将单击此元素，因此两者将同时工作。

【讨论】：

【解决方案3】：

您还可以尝试为li 添加click event 处理程序，并确保li 和锚标记a 采用相同的width。

【讨论】：

【解决方案4】：

虽然不建议这样做，但如果您仍想同时使用这两种方法，那么这可能会奏效：

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

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

希望这会有所帮助！

【讨论】：