Почему мой загрузочный модальный режим не закрывается при предварительном просмотре загружаемой картинки? - PullRequest
Новая
       41

Почему мой загрузочный модальный режим не закрывается при предварительном просмотре загружаемой картинки?

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

Почему мой мод не закрывается при нажатии x или close?Для меня абсолютно бессмысленно, почему это не сработает, если использовать правильные атрибуты, которые я использую.

Кроме того, когда я нажимаю кнопку Preview Image, я могу просматривать изображение внутри модального окна успешно, но толькоПОСЛЕ того, как я закрываю окно, которое просит меня загрузить изображение.Я не хочу, чтобы это поле появлялось каждый раз, когда пользователь нажимает Preview Image?

Вот мой код: 

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;

1 Ответ

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

Вместо этого: 

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

Попробуйте отправить аргумент в функцию напрямую: 

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

Также, используя es6, вам не нужно связывать

Вы можетезатем назовите это так: 

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