从dragonallySetInnerHtml内容调用React类函数

Question

For an application I am developing using ReactJS, I have to make an ajax call out to a service which is either going to return a JSON object (if successful) or a small amount of HTML code (if not successful) . This HTML code has a link inside of it which needs to launch a modal control in my react app. I cannot alter the HTML coming back from the ajax call because it is used in other applications.

The HTML will look something like this:

<span>ERROR MESSAGE HERE.</span>
<span>
    <a data-error-code="141096">
        <u>See details.</u>
    </a>
</span>

When the user clicks on that "See details" link, the modal should open, go get the detail message from the server and display it in the modal. This works on other areas of the site already.

What I'm struggling with is handling the onClick() event attached to the <a> tag. I have a method on my react component that the HTML will be rendered in named showErrorModal which will open the error detail modal.

Any help is greatly appreciated!

---

UPDATE: A jsFiddle with sample of what I need can be found here . In this case, I've hard-coded the HTML that I'm injecting into the div area. What I need to do is to add an onClick() event to that anchor tag in the htmlToInject HTML string to call handleClick() . I can't modify the contents of htmlToInject since that is generated server-side and I have no control over that. This is pretty much the exact structure the server will be returning, and the reason I need that error messaging is because it is dynamic based on what the error is (ex: "There are no items in your bag that this coupon applies to" vs "This coupon is expired" vs "You don't qualify to use this coupon"). The separate messages are returned in individual <span> tags. In the server call I do also get the error code returned so I don't need to worry about reading the data-error-code attribute. what I get back from the server looks like:

 { success: false, error-code: 123456, error: "some HTML goes here" } 

When the call returns with data, I do a this.setState() to set those 3 values, so I already know what the error code is.

Answer 1

I used some jQuery applied in just the right place ( updated jsFiddle ):

componentDidMount: function() {
    $('.outsideHtml a').click(function(e){
        alert($(e.target).attr('data-error-code'))
    })
}

You'll probably want componentDidUpdate instead of or as well as componentDidMount , if the component has an initial state before rendering the HTML (such as a 'Loading...' state). You may also need to do some this wrangling in the click handler function (or use ES2015) to call methods on the component instance.

I found that jQuery's on method didn't catch DOM inserted by React (at least via dangerouslySetInnerHTML ). I'm guessing React's DOM manipulation bypasses something jQuery relies on. By the time the componentDid... functions are called the DOM is ready for jQuery.

Adding the click event handler could probably be achieved relatively easily in the DOM without jQuery but the concept would be the same.