make href call a method in reactjs

Question

I would like to make the href attribute of my anchor tag to call a method instead of going to some url. I know that in plain js I can do this:

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

So I've done the same in my jsx file:

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

but it doesn't work. How it can be done?

element.href = '#'; element.addEventListener('click', () => foo(value)); — Scriptkiddy1337, Jul 11 '19 at 11:37
but I want the context menu behavior, and this way I don't get it — Joe, Jul 11 '19 at 11:43
@Joe — What specific context menu behaviour are you looking for? Open Link In New Window generally won't work with JavaScript scheme URLs. Nor will Save Link As. — Quentin, Jul 11 '19 at 11:44
@Quentin - suppose i want to click on 'open link..' but block it from opening a new window and instead executing my method. is it possible? — Joe, Jul 11 '19 at 11:47
@Joe — So you want something which isn't a link, but when people right click on it, you want to display a context menu that prompts them to "Open Link In New Window" which, if they click on it … **won't** open a new window? That doesn't make sense. — Quentin, Jul 11 '19 at 11:49
@Quentin - why? I have an button that has an onclick which does lots of stuff and then redirect. Now they're asking me to have it open through a contextmenu, but I have these logics that I need — Joe, Jul 11 '19 at 11:51
@Joe — Part of your problem is that you opened by asking [the wrong question](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). `href="javascript:etc etc"` won't give you that result, so generating that with JavaScript won't help you. — Quentin, Jul 11 '19 at 11:52
You need to either use a real URL and server-side logic, or you need to use a `button` and [create a custom context menu](https://stackoverflow.com/questions/28648292/right-click-menu-using-react-js) — Quentin, Jul 11 '19 at 11:54

score 1 · Answer 1 · edited Jul 11 '19 at 11:43

1

use reacts onClick

You can use onClick on an element in react. like this

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

That being said, if the purpose of your a tag is not to go to a link then your html is incorrect and you should think about using a button tag instead

edited Jul 11 '19 at 11:43

Quentin

914,110
126
1,211
1,335

answered Jul 11 '19 at 11:38

Joe Lloyd

19,471
7
53
81

That syntax won't compile and no such variable `javascript` – charlietfl Jul 11 '19 at 11:41
Joe I copied your code exactly, you had javaScript written in there for some reason, our good friend @Quentin sorted it out :) – Joe Lloyd Jul 11 '19 at 11:47

preet singh · Answer 2 · 2021-12-05T06:11:18.497

-1

in React use onClick to do the job

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

edited Dec 05 '21 at 06:11

answered Jul 11 '19 at 11:43

preet singh

9
2

make href call a method in reactjs

2 Answers2

use reacts onClick