Реагировать дочерний элемент, вызывающий родительский элемент, по значению

Question

Я пытаюсь создать элемент MessageBox (Modal Box), который получает входные данные, чтобы сформировать Modal Box. Метод close в MessageBox как-то не вызывает parent close и inturn получить Модал исчезнуть, любая помощь пожалуйста ??

экспорт класса по умолчанию MessageBox расширяет компонент расширяет {

constructor(props) { 
    super(props); 
    this.close = this.close.bind(this); 
} 

close(){ 
    this.props.callbackParent; 
} 

render(){ 
    return (
     <div> 
      <Modal show={this.props.visibility} onHide={this.close}> 
       <ModalHeader closeButton> 
        <ModalTitle>{this.props.msgHeader}</ModalTitle> 
       </ModalHeader> 
       <ModalBody>{this.props.msgBody}</ModalBody> 
      </Modal> 
     </div> 
    ); 
} 

}

экспорт класс по умолчанию продукта компонент {

constructor(props) { 
    super(props); 
    this._initState = { 
     showModal: false 
    } 
    this.state = this._initState; 
    this.open = this.open.bind(this); 
    this.close = this.close.bind(this); 
} 

open(){ 
    this.setState(
     { showModal: true } 
    ); 
} 

close(){ 
    this.setState(
     { showModal: false } 
    ); 
} 

render(){ 
    return (
     <div> 
      <Button bsStyle="primary" bsSize="large" onClick={this.open}> 
       Go!!! 
      </Button> 
      <MessageBox visibility={this.state.showModal} msgHeader='Header goes here ...' msgBody='Overlay message body goes here ..' callbackParent={this.close}/> 
     </div> 
    ); 
} 

};

Answer 1

Кажется, что вы не указали скобки в методе закрытия MessageBox.

this.props.callbackParent; 

должен быть

this.props.callbackParent(); 

(ТНХ к @azium) для ответа.

Answer 2

Я получил это работает под этим

export default class MessageBox extends Component{ 

constructor(props) { 
    super(props); 
} 

render(){ 
    return (
     <div> 
      <Modal show={this.props.visibility} onHide={this.props.callbackParent}> 
       <ModalHeader closeButton> 
        <ModalTitle>{this.props.msgHeader}</ModalTitle> 
       </ModalHeader> 
       <ModalBody>{this.props.msgBody}</ModalBody> 
       <ModalFooter> 
        <Button onClick={this.props.callbackParent}>Close</Button> 
       </ModalFooter> 
      </Modal> 
     </div> 
    ); 
} 

}