Use React in CMS and expose functions to HTML to access useState functions in React

问题

I want to use React in a CMS. With js I inject React into a div that displays something comming from React. That works well but only because React creates the inputfields too.

Now I need the CMS create the input fields and want to attach an event to the created input in the CMS template.

<input type="number" onchange="exposedReact()">something</input>

In react I would have somewhere definied a function:

const [number, setNumber] = useState(0);

const exposedReact = (e) => {
    setNumber(e.target.value);
}

return(
    <div>{number}</div>
);

So everytime I change the value in the input created by the CMS, I want react to react to that input, rerendering the div.

I have found questions like this Call child method from parent

And in the docs this:

https://reactjs.org/docs/refs-and-the-dom.html

But they use old class based react and not hooks or explain how to expose something within react from child to parent.

In the question is an answer about hooks but I don't understand how I could adapt it to my situation. https://stackoverflow.com/a/37950970/12848667

来源：https://stackoverflow.com/questions/62936167/use-react-in-cms-and-expose-functions-to-html-to-access-usestate-functions-in-re