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

【问题标题】：Semantic UI modal component onClose with React带有 React 的语义 UI 模态组件 onClose
【发布时间】：2016-10-26 09:29:11
【问题描述】：

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

我现在正在做的是使用“门户”，但我认为“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。

【问题讨论】：

标签： javascript jquery modal-dialog reactjs semantic-ui

【解决方案1】：

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

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

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

我通过 close 绑定到父组件。

【讨论】：