语义UI模式组件onClose React

Question

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

我现在在做什么使用“门户”，但我认为“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); 

和我通过关闭绑定到父组件。