Friendlypix-web: firebaseHelper undefined

Question

Я основал свой проект на friendlypix-web, и я хочу позволить пользователям редактировать текст поста так же, как они уже могут редактировать комментарий.Для этого я создал метод в FirebaseHelper.js.

Приведенный ниже код с использованием window.prompt () работает (см. Раздел с комментариями).Но я хочу использовать SweetAlert2, который позволяет textarea помогать с более длинными заголовками и комментариями.

Вот мой код:

_setupEditButton(postId, author = {}, imageText) {
    const post = this.postElement;

    if (this.auth.currentUser && this.auth.currentUser.uid === author.uid) {
        post.addClass('fp-owned-post');
    } else {
        post.removeClass('fp-owned-post');
    }

    $('.fp-edit-post', post).click(() => {

//       const newPost = window.prompt('Edit the post?', imageText);
//        if (newPost !== null && newPost !== '') {
//            this.firebaseHelper.editPost(postId, newPost).then(() => {
//              $('.fp-first-comment .fp-text', post).text(newPost);
//            });
//        }

        swal({
            title: 'Edit post',
            showCancelButton: true,
            input: 'textarea',  // sweetalert2 allows textarea
            inputValue: imageText,
            reverseButtons: true,

        }).then(function(result) {

            const newPost = result;

            if (newPost !== null && newPost !== '') {
                try {
                    this.firebaseHelper.editPost(postId, newPost).then(() => {
                        $('.fp-first-comment .fp-text', post).text(newPost);
                    });
                } catch (e) {
                    console.log(e);
                }
            }
        });
    });
}

К сожалению, мое слабое понимание JavaScript приводит к

TypeError: Cannot read property 'firebaseHelper' of undefined

Почему «this» не определено в версии swal () ине в окне .prompt ()?

Answer 1

Это потому, что this внутри функции обратного вызова относится к этим функциям, а не к объекту вне функции.

Самое простое изменение - привязать функцию к правильному значению this:

.then(function(result) {

    const newPost = result;

    if (newPost !== null && newPost !== '') {
        try {
            this.firebaseHelper.editPost(postId, newPost).then(() => {
                $('.fp-first-comment .fp-text', post).text(newPost);
            });
        } catch (e) {
            console.log(e);
        }
    }
}).bind(this);

Но я настоятельно рекомендую прочитать здесь больше решений и объяснений:

• Как получить доступ к правильному `this` внутри обратного вызова?