带有React的语义UI模态组件onClose

Question

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 1

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.