Brandon Brandon - 1 month ago 10
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>");

this.$modal.append(this.$header);
this.$modal.append(this.$icon);
this.$modal.append(this.$content);

this.renderDialogContent(this.props);
}

componentWillReceiveProps(newProps) {
this.renderDialogContent(newProps);
}

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

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

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


How do I define that behavior?

Here's a fiddle with some similar code.

Answer

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.

Comments