Bootstrap Modal在单击按钮后变为空白

Question

我正在尝试调用Modal函数。当我单击以查看它时，它不会呈现，并且页面变为空白（白色）。

这是BootstrapModal：

class BootstrapModal extends React.Component{

    constructor(){
        super();
        this.state = {
            showHide : false
        }
    }

    handleModalShowHide() {
        console.log("hitting");
        this.setState({ showHide: !this.state.showHide })
    }

    render(){
        return(
            <div>
                <Button variant="third" id="btn-third" onClick={() => this.handleModalShowHide()}>
                    Send Email
                </Button>
                <Modal show={this.state.showHide}>
                    <Modal.Header closeButton onClick={() => this.handleModalShowHide()}>
                    <Modal.Title>Email Chart To User</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <FormGroup>
                            <Modal.Label>Email address</Modal.Label>
                                 <Modal.Input
                                    type="email"
                                    placeholder="Email"
                                 />
                        </FormGroup>

                    </Modal.Body>
                    <Modal.Footer>
                        <Button variant="secondary" onClick={() => this.handleModalShowHide()}>
                            Cancel
                        </Button>
                        <Button variant="primary" onClick={() => this.handleModalShowHide()}>
                            Send
                        </Button>
                    </Modal.Footer>

                </Modal>

            </div>
        )
    }

}

export default BootstrapModal;

关于为什么会这样的想法？任何建议将不胜感激。

Answer 1

我认为您的问题是您尚未绑定handleModalShowHide（）函数。您可以避免使用箭头功能：

handleModalShowHide = () => {
    Code here
}

Answer 2

我不得不改变

<FormGroup>
    <Modal.Label>Email address</Modal.Label>
        <Modal.Input
            type="email"
            placeholder="Email"
        />
</FormGroup>

收件人

<FormGroup>                           
    <label for="message-text" class="col-form-label">Email Adress:</label>
    <textarea class="form-control" id="message-text"></textarea>
</FormGroup>

更改此选项后，模态成功渲染。