Как закрыть семантический ui modal в другом реагирующем компоненте?

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

Pass метод 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> 
    ) 
    } 
}