1

I am creating a extension for Firefox, I insert this in page using Shadow dom. As we know react events not works in shadow dom, thus I use react-shadow-dom-retarget-events package to re-target the events to shadow dom.

This works fine if event is attached to a React component & then to a native component inside it, but this is not working with only native component.

E.g.

<Button onClick={/*do something*/} />

In Button.js

<button onClick={e=>this.props.onClick()}>Click</button>

Will work, but following:

<span onClick={e=>console.log('Test')}>Click</span>

Will not work. I am able to figure out what is causing this behavior or ho to attach event to native dom elements also.

demonofthemist
  • 4,081
  • 4
  • 26
  • 45
  • 1
    If you put this HTML info a web page using a content script, it probably won't do you no good because content scripts run in an isolated world. Need to see the entire setup to be able to suggest a solution. – wOxxOm Jun 11 '19 at 08:06
  • Although I answered this for Chrome, same principles apply in Firefox; check out this question, it may describe your problem: https://stackoverflow.com/q/37097336/934239 - but as wOxxOm said, it's currently not enough information to confirm this as duplicate. – Xan Jun 11 '19 at 08:59

1 Answers1

0

In the context of React, an inline function is a function that is defined while React is “rendering”. There are two meanings of “render” in React that people often get confused about: (1) getting the React elements from your components (calling your component’s render method) during an update and (2) actually rendering updates to the DOM

I think you should read more about inline-function

Le Quang
  • 515
  • 4
  • 10