Preserving Event Handler after using "dangerouslySetInnerHTML"

Question

I have an HTML Div element (lets call it ELEM) .

ELEM has an "onclick" event handler which does something .

I also use SPFX to create a Webpart and use it on the same page as ELEM.

I want to set ELEM as the webpart's child.

And for that I use "dangerouslySetInnerHTML" .

The ELEM does appear as a child ,however the "onclick" handler stops working .

What am I missing?

edit: For plain react ie without spfx it works just fine see live https://codesandbox.io/p/sandbox/event-handler-inner-html-7m7gxz

Answer 1

If I understand correctly, you are copying an element residing outside of your SPFx webpart and then want it to appear inside your SPFx webpart.

This is a little unconventional, but if you need your ELEM to have a working onclick event, you need to register it.

Sample code:

const elemRef = useRef<HTMLDivElement>(null);

useEffect(() => {
if (elemRef.current) {
 
  elemRef.current.addEventListener('click', handleClick);
}

...

<div
  ref={elemRef}
  dangerouslySetInnerHTML={{ __html: htmlContent }}
/>