Menu
I'm working on adding React components to an existing project with a lot of legacy code.
One issue I'm running into is that React attaches its handlers for event delegation on the document object. Unfortunately for me, a lot of our legacy code intercepts click events and calls event.stopPropagation before they make it to the document object (e.g. to handle implement dropdowns and modals that close when you click outside of them).
When the click event is intercepted, the event doesn't get propagated to React's document-level event handler, and the event isn't delegated to my React components (even though the actual DOM elements for the components sit above the intercepting element in the DOM and receive the actual, non-delegated events first).
So ... question: Is there a way to manually trigger the React synthetic event for a given event without it hitting React's document-level event handler? Or is there a way to move or duplicate that single event handler somewhere else?
As a fallback, I'm considering just using jQuery to add events after the React component mounts, but I'd rather not do that if possible.
856
We can create custom events using the Event constructor. We can now finally create our non-existent “ onDialogClose ” event as such: //First, we initialize our event const event = new Event('onDialogClose'); // Next, we dispatch the event. elem.
The Best Answer is. You could use the ref prop to acquire a reference to the underlying HTMLInputElement object through a callback, store the reference as a class property, then use that reference to later trigger a click from your event handlers using the HTMLElement. click method.
Add the event listener in the useEffect hook. Return a function from the useEffect hook. Use the removeEventListener method to remove the event listener when the component unmounts.
For a synthetic event, currentTarget will point to the DOM node corresponding to the React component handling the “delegated” event. But the native event will have currentTarget pointing to the document root! This is normal, as React is handling the application events in the top-level (using event delegation, in fact).
Depends on what are you doing, the events in react should generate a change on the inner state of the component or something like that (maybe changes in a global state if you're using a flux-like architecture). So, with this in mind, you can create a wrapper, to render your components, and trigger that wrapper with what you want to do.
For example:
function renderComponent(props={}) {
ReactDOM.render(<Component {...props} />, document.getElementById('elementId'));
}
Lets say you have a button that, after clicking, should create a change on the text of a react component.
$('button#my-button').on('click', function(event){
event.preventDefault();
renderComponent({text: 'Hello world!'});
});
So, your react component will receive the text property, and there you can do the text change. This is just a quick and dirty example of what you can do.
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
