Brandon Brandon - 1 year ago 145
React JSX Question

Semantic UI modal component onClose with React

I need a way to define behavior on a Semantic modal that gets executed when it closes.

What I'm doing now uses a 'portal', but I think the "onClick" event doesn't work because these html elements are outside of react.

I had:

componentDidMount() {
console.log('mounting modal', this);
this.node = React.findDOMNode(this);
this.$modal = $(this.node);

this.$icon = $("<i class='close icon' /></i>");

this.$header = $("<div class='header'></div>").html(this.props.header);
this.$content = $("<div class='content'></div>");



componentWillReceiveProps(newProps) {

renderDialogContent(props) {
props = props || this.props;

React.render(<div>{props.children}</div>, this.$content[0]);

if (props.isOpen) {
.modal('setting', 'closable', false)
else {
this.$modal.modal('hide modal');

How do I define that behavior?

Here's a fiddle with some similar code.

Answer Source

For some reason, I'm unsure why, you can't use the regular React event handlers inside the modal view.

So on the close icon, I registered a jquery onClick handler.

$('#' + id).click(this.props.close);

and I passed close in bound to the parent component.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download