尝试预览要上传的图片时，为什么我的引导程序模式不会关闭？

Question

Why won't my modal close upon clicking the x or close ? It makes absolutely no sense to me why this won't work given the right attributes that I'm using.

Also, when I click Preview Image button, I can view the picture inside the modal successfully but only AFTER I close the box which asks me to upload a picture. I don't want that box to be there everytime the user clicks Preview Image ?

Here's my code:

import React, {Component} from 'react';
import $ from 'jquery';

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

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

    fileUpload() {
        if ($("#new_post_image").click()) {
            this.setState({imgPrev: true});
        }
    }

    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.fileUpload.bind(this)}
                    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 class="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

Instead this :

 fileUpload() {
    if ($("#new_post_image").click()) {
        this.setState({imgPrev: true});
    }

Try to send argument in function directly:

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

Also, by using es6, you dont need binding

You can then call it like this:

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