Question

我正在尝试创建一个MessageBox（模态框）元素，它获取输入以形成模态框，MessageBox中的close方法以某种方式不会调用父关闭和inturn得到模态消失，任何帮助请？

export default class MessageBox extends Component {

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>
    );
}

}

export default class Product extends Component {

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的close方法中缺少括号。

this.props.callbackParent;

应该是

this.props.callbackParent();

（thx to @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>
    );
}

}

在值上调用父元素的React子元素

2 个答案: