语义 UI 模态组件 onClose with React

Question

我需要一种方法来定义关闭时执行的语义模式的行为。

我现在正在做的是使用 'portal'，但我认为 "onClick" 事件不起作用，因为这些 html 元素在反应之外。

我有：

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

如何定义该行为？

Here's a fiddle with some similar code。

Answer 1

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

所以在关闭图标上，我注册了一个 jquery onClick 处理程序。

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

并且我将 close 传递给了父组件。

语义 UI 模态组件 onClose with React

Semantic UI modal component onClose with React

javascript

jquery

modal-dialog

reactjs

semantic-ui