带有React的语义UI模态组件onClose [英] Semantic UI modal component onClose with React

问题描述

我需要一种方法来定义语义模态的行为，该模态在关闭时会执行.

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

我现在正在使用的是门户"，但我认为"onClick"事件不起作用，因为这些html元素不在react之内.

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.

我有:

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');
  }
}

我如何定义该行为?

这里是一些类似代码的小提琴.

推荐答案

由于某种原因，我不确定为什么，您不能在模式视图中使用常规的React事件处理程序.

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

因此，在关闭图标上，我注册了一个jquery onClick处理程序.

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.

这篇关于带有React的语义UI模态组件onClose的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！