onchange event doesn't work in react

[JaLe29]

From demo I can add onchange event.

<div id="header" onchange="onChange(this)">
  <h1>Header</h1>
  <span class="pageNumber" />/<span class="totalPages" />
</div>

I would like to add plus 10 for every my page.

const Footer = () => (
   <div
   	id="footer"
   	onChange={() => {
   		const pageNumberElement: any = document.getElementsByClassName('pageNumber')[0];

   		pageNumberElement.textContent = parseInt(pageNumberElement.textContent, 10) + 10;
   	}}
   >
   	<span
   		className="pageNumber"
   	/>
   	/
   	<span
   		className="totalPages"
   	/>
   </div>
);

And nothing happened, plus 10 was not applied. What is wrong? Are there any possibility to support react?

[PejmanNik]

React handle event differently, so it will not catch the triggered event by this lib.

You can fix this issue by some workaround like this, Please improve the type usage 😅

Your React App:

  const handleOnChange = useCallback((event:any)=> {
    if (event.target.id !== "header") return;

    const pageNumberElement: any = document.getElementsByClassName('pageNumber')[0];
    pageNumberElement.textContent = parseInt(pageNumberElement.textContent, 10) + 10;
  },[]);

  useLayoutEffect(()=> {
    document.addEventListener("change",handleOnChange);
    (window as any).isReady= true;
    return ()=> { document.removeEventListener("change",handleOnChange);};
  },[handleOnChange]);

In the node.js side:

 const page = await browser.newPage();
 await page.goto("http://localhost:3000");
 await page.waitForFunction("isReady=== true")
 await report.pdfPage(page, ....