需要时可以成功打开模态但无法关闭它

Question

I am trying to use React boostrap modal, I can successfully open it when i need to but I cannot close it. I have no idea what i am doing wrong.

my markup

```                <Modal show={this.props.show} >
                    <Modal.Header>
                        <Modal.Title>Enter Log</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        Hello i am Modal!!!!!
                    </Modal.Body>
                    <Modal.Footer>
                    <Button onClick={() => {closeModal()}}  variant="primary"> Close </Button>
                    </Modal.Footer>```

state:

constructor(props) {
    super(props)   
    this.state = {
      closeModal: false
    }
}

Handler function:

const closeModal = () => {
    this.setState({closeModal: true}); 
}

Answer 1

You can do this way,

const closeModal = () => {
    this.setState({ show: false});
}

<Modal show={this.props.show} onHide={this.props.closeModal} >
    <Modal.Header closeButton>
        <Modal.Title>Enter Log</Modal.Title>
    </Modal.Header>
    <Modal.Body>
       <p> Hello i am Modal!!!!! </p>
    </Modal.Body>
    <Modal.Footer>
        <Button onClick={this.props.closeModal} variant="primary"> Close </Button>
    </Modal.Footer>
</Modal>

refrence https://react-bootstrap.github.io/components/modal/

Answer 2

You need to use the same condition to check if render the modal or not

You are using props to check if your modal should be rendered and when closing it, you are setting state to false.

If you want to use props you will need to update your props, using redux and dispatching an action or whatever

According to yor handleClose function, you will need to check state instead of props in the condition

const closeModal = () => { this.setState({closeModal: true}); }

<Modal show={this.props.show} >
                <Modal.Header>
                    <Modal.Title>Enter Log</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Hello i am Modal!!!!!
                </Modal.Body>
                <Modal.Footer>
                <Button onClick={() => this.closeModal()} variant="primary"> Close </Button>
                </Modal.Footer>