javascript - Semantic UI modal component onClose with React -
i need way define behavior on semantic modal gets executed when closes.
what i'm doing uses 'portal', think "onclick" event doesn't work because these html elements 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 define behavior?
for reason, i'm unsure why, can't use regular react event handlers inside modal view.
so on close icon, registered jquery onclick handler.
$('#' + id).click(this.props.close);
and passed close in bound parent component.
Comments
Post a Comment