語義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); 

和我通過關閉綁定到父組件。