单击“ x”或“关闭”后，我的引导程序模式不会关闭

Question

由于某种原因，我的引导程序模式无法关闭。 我可以在模式中预览图像就很好了，但是当我尝试关闭它时，它不起作用。

我试图将<div id="myModal" class="modal fade" role="dialog"></div>放在现有的<div className="modal-dialog"></div>之上，但是如果我这样做那，那么在单击“ Preview Image图像按钮时，模态甚至不会出现。

我在做什么错，我该如何解决？

这是我的代码：

import React, { Component } from 'react';

class Upload extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedFile: null,
            prevImgURL: '',
            imgPrev: false
        };
        this.imageChange = this.imageChange.bind(this);
    }

    imagePreview = (newPostImageBool) => {
        this.setState({imgPrev: newPostImageBool});
    };

    imageChange(e) {
        e.preventDefault();
        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () => {
            this.setState({
                selectedFile: file,
                prevImgURL: reader.result
            });
        }
        if(file) reader.readAsDataURL(file);
    }

    render() {
        return (
            <div>
                <input
                    id="new_post_image"
                    type="file"
                    onChange={this.imageChange}
                    name="image"
                    accept="image/*"
                />

                <button
                    type="button"
                    onClick={() => this.imagePreview(true)}
                    className="btn btn-info btn-lg"
                    data-toggle="modal"
                    data-target="#myModal"
                >
                    Preview Image
                </button>

                {this.state.imgPrev ?
                    <div className="modal-dialog">
                        <div className="modal-content">
                            <div className="modal-header">
                                <button type="button" className="close" data-dismiss="modal">&times;</button>
                                <h4 className="modal-title">Preview</h4>
                            </div>
                            <div className="modal-body">
                                <img id="pic" className="img-responsive" src={this.state.prevImgURL}/>
                            </div>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                    : null}
            </div>
        );
    }
}

export default Upload;

Answer 1

import React, { Component } from 'react';

class Upload extends Component {
    constructor(props) {
        super(props);

        this.state = {
            selectedFile: null,
            prevImgURL: '',
            imgPrev: false
        };
        this.imageChange = this.imageChange.bind(this);
    }

    imagePreview = (newPostImageBool) => {
        this.setState({imgPrev: newPostImageBool});
    };

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

    imageChange(e) {
        e.preventDefault();
        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () => {
            this.setState({
                selectedFile: file,
                prevImgURL: reader.result
            });
        }
        if(file) reader.readAsDataURL(file);
    }

    render() {
        return (
            <div>
               <input
                id="new_post_image"
                type="file"
                onChange={this.imageChange}
                name="image"
                accept="image/*"
            />

            <button
                type="button"
                onClick={() => this.imagePreview(true)}
                className="btn btn-info btn-lg"
                data-toggle="modal"
                data-target="#myModal"
            >
                Preview Image
            </button>

            {!!this.state.imgPrev &&
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal" onClick={this.closeModal}>&times;</button>
                            <h4 className="modal-title">Preview</h4>
                        </div>
                        <div className="modal-body">
                            <img id="pic" className="img-responsive" src={this.state.prevImgURL}/>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.closeModal}>Close</button>
                        </div>
                    </div>
                </div>
             }
        </div>
       );
   }
}

export default Upload;