How can I manually dispatch React Synthetic Events?

Question

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.

Answer 1

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.