使href调用reactjs中的方法

Posted 2023-03-05

【中文标题】使href调用reactjs中的方法

【英文标题】：make href call a method in reactjs

【发布时间】：2019-11-21 02:51:27

【问题描述】：

我想让我的锚标记的 href 属性调用一个方法，而不是转到某个 url。我知道在普通的 js 中我可以做到这一点：

..href="javascript: foo(value)">

所以我在我的 jsx 文件中做了同样的事情：

<a href=javascript: ()=>foo(value)>Click Here!</a>

但它不起作用。 怎么做？

【问题讨论】：

element.href = '#'; element.addEventListener('click', () => foo(value));

但是我想要上下文菜单的行为，这样我就不明白了

@Joe — 您在寻找什么特定的上下文菜单行为？在新窗口中打开链接通常不适用于 JavaScript 方案 URL。也不会将链接另存为。

@Quentin - 假设我想点击“打开链接..”但阻止它打开新窗口并执行我的方法。有可能吗？

@Joe — 所以你想要一些不是链接的东西，但是当人们右键单击它时，你想要显示一个上下文菜单，提示他们“在新窗口中打开链接”，如果他们点击它……不会打开一个新窗口？这没有意义。

【参考方案1】：

使用响应 onClick

您可以在反应中的元素上使用onClick。 像这样

<a onClick=()=>foo(value)>Click Here!</a>

话虽这么说，如果您的a 标签的目的不是转到链接，那么您的 html 不正确，您应该考虑改用button 标签

【讨论】：

该语法不会编译并且没有这样的变量javascript

Joe 我完全复制了您的代码，由于某种原因，您在其中编写了 javaScript，我们的好朋友 @Quentin 将其整理出来 :)

【参考方案2】：

在 React 中使用 onClick 来完成这项工作

<a onClick=() => doSomething("Hello") >Click Me</a>