English 中文(简体)
JS:调用事件处理器
原标题：React JS: calling event handlers
I have started working in React recently. I noticed one behaviour like when I am trying to call my event handle with the same component like this onClick={someEventHandler} it is triggering but when I try to do the same same like this onClick={()=> someEventHandler} it doesn t work. I noticed that when I need to pass any arguments and calling the function like onClick={()=>someEventHandler(id)} it is working fine. Can some one explain me the logic/theory behind this?
最佳回答
The onClick event handler needs a function to be passed to it. Whenn the event is triggered, it calls the handler function passed to it. In the first case it works because you pass someEventHandler to onClick which is invoked when event is fired. An invocation to the function is like someEventHandler() Now in the second case, onClick={()=>someEventHandler} the function passed to onClick is ()=>someEventHandler which can be elaborated further as ()=> { return someEventHandler; } Now if you notice above you are returning a function from the onClick event handler. The returned function is now never invoked and hence you see the above behavior It works in the last case like onClick={()=>someEventHandler(id)}, because when the event handler is invoked, it invoked someEventHandler with id too. However you do not need to pass id to invoke it, you can simply use it like onClick={()=>someEventHandler()} and it work, provided you don t need id as a parameter in someEventHandler. Another thing to note when you are using function like onClick={()=>someEventHandler()} instead of onClick={someEventHandler} is that your someEventHandler will not be invoked with any arguments. If you want the event to be passed as argument to someEventHandler, you need tto explicitly pass it like onClick={(e)=>someEventHandler(e)}
时间：2021-03-31 12:57:28
问题回答
onClick={someEventHandler} will trigger the handler as soon as your component gets loaded/rendered on the screen but by adding an arrow function before the handler like this - onClick={()=> someEventHandler} will make sure not to trigger the component before you click on it
时间：2021-03-31 12:58:32


上一篇：
下一篇：


相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

时间：2009-11-13 04:26:50 回答：3 展示：1
How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

时间：2009-11-13 04:03:02 回答：2 展示：1
How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

时间：2009-11-13 03:31:36 回答：3 展示：1
Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

时间：2009-11-09 14:57:38 回答：8 展示：1
javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

时间：2009-11-09 14:29:27 回答：2 展示：1
Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

时间：2009-11-09 14:21:27 回答：2 展示：1
热门标签

友情链接

Allggapp Alljchome-教程家园 mvfinale.com-影视剧情大结局大全