Мой мод начальной загрузки не закрывается после нажатия кнопки «x» или «Закрыть» - PullRequest
Новая
       22

Мой мод начальной загрузки не закрывается после нажатия кнопки «x» или «Закрыть»

0 голосов
/ 16 декабря 2018

По какой-то причине мой модал начальной загрузки не закрывается.Я могу предварительно просмотреть изображение в модальном режиме, но когда я пытаюсь закрыть его, оно не работает.

Я пытался поместить <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;

1 Ответ

0 голосов
/ 16 декабря 2018 
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;
...