语义UI模态组件onClose with React

Semantic UI modal component onClose with React

本文关键字：with React onClose 组件 UI 模态 语义      更新时间：2023-09-26

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

我现在使用的是"门户"，但我认为"onClick"事件不起作用，因为这些html元素不在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事件处理程序。

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

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

我通过了与父组件的紧密绑定。

相关文章：