语义UI模态组件onClose与React

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

我现在正在做的是使用“门户”，但我认为“onClick”事件不起作用，因为这些html元素不在反应之中。

我有：

componentDidMount() { console.log('mounting modal', this); this.node = React.findDOMNode(this); this.$modal = $(this.node); this.$icon = $(""); this.$header = $("
").html(this.props.header); this.$content = $("
"); 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(
{props.children}
, this.$content[0]); if (props.isOpen) { this.$modal .modal('setting', 'closable', false) .modal('show'); } else { this.$modal.modal('hide modal'); } } 

我该如何定义这种行为？

这是一个类似代码的小提琴 。

Answer 1

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

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

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

然后我将关闭传递给父组件。