如何關閉另一個反應組件中的語義ui模態？

Question

在我的主要組件中，我可以通過單擊圖標打開模式。模態的內容是一個獨立的組件，它調用一個方法。 如果方法調用成功，我想關閉模態。但我該怎麼做？

主要成分

class Example extends Component { 
    constructor(props) { 
     super(props) 
     this.state = {} 
    } 

    render() { 
     return (
      <div> 
       <Modal trigger={ <Icon name='tags' /> } > 
        <Modal.Header> 
         <div> 
          <Header floated='left'>Title</Header> 
          <Button floated='right'>A Button</Button> 
         </div> 
        </Modal.Header> 
        <Modal.Content> 

         <ModalContent /> 

        </Modal.Content> 
       </Modal> 
      </div> 
     ) 
    } 
} 

模態內容

class ModalContent extends Component { 
    constructor(props) { 
     super(props) 
     this.state = {} 
    } 

    handleClick() { 
     method.call(
      { param }, 
      (error, result) => { 
       if (result) { 
        // Now close the modal 
       } 
      } 
     ); 
    } 

    render() { 
     return (
      <Button onClick={this.handleClick} content='Save' /> 
     ) 
    } 
} 

Answer 1

你應該一個onClose屬性添加到<Modal>元素。看下面的例子：

<Modal 
    trigger={<Button onClick={this.handleOpen}>Show Modal</Button>} 
    open={this.state.modalOpen} 
    onClose={this.handleClose} 
    > 

然後你可以添加onClose函數到你的模態中的按鈕。來自文檔的完整示例： https://react.semantic-ui.com/modules/modal#modal-example-controlled

Answer 2

傳遞一個onSuccess方法作爲道具：

在父：

<ModalContent onSuccess={this.onModalSuccess}/> 

的子組件

：

handleClick() { 
    method.call(
     { param }, 
     (error, result) => { 
      if (result) { 
       this.props.onSuccess() 
      } 
     } 
    ); 
} 

這樣你保持你的開啓/關閉邏輯父組件。

Answer 3

semantic-ui有財產open。只需設置true或false

class Example extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     open: false 
    } 
    open =() => this.setState({ open: true }) 
    close =() => this.setState({ open: false }) 
    render() { 
    return (
     <div> 
      <Modal open={this.state.open} trigger={ <Icon name='tags' /> } > 
       <Modal.Header> 
        <div> 
         <Header floated='left'>Title</Header> 
         <Button floated='right'>A Button</Button> 
        </div> 
       </Modal.Header> 
       <Modal.Content> 

        <ModalContent /> 

       </Modal.Content> 
      </Modal> 
     </div> 
    ) 
    } 
}