Увеличение индикатора выполнения Material Design Lite с помощью React

У меня есть MDL, работающий с React в данный момент, и в данный момент он работает нормально.

У меня есть индикатор выполнения, появляющийся на странице по мере необходимости, и он загружается с указанным «прогрессом» при загрузке страницы при прямом вводе числа:

document.querySelector('#questionnaireProgressBar').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(10);
})

или при передаче числа через переменную:

document.querySelector('#questionnaireProgressBar').addEventListener('mdl-componentupgraded', function() {
    this.MaterialProgress.setProgress(value);
})

Однако после этого он перестает работать. Я пытаюсь обновить значение через переменную, но оно не обновляется. Мне посоветовали использовать это:

document.querySelector('.mdl-js-progress').MaterialProgress.setProgress(45);

чтобы обновить значение, но это не работает. Даже при попытке сделать это прямо в консоли.

При попытке через консоль получаю следующую ошибку:

Uncaught TypeError: document.querySelector(...).MaterialProgress.setProgress is not a function(…)

Когда я пытаюсь увеличить значение с помощью переменной, я не получаю ошибок, и когда я console.log(значение), мне предоставляется правильное число (1,2,3,4...) после каждого события щелчка, которое запускает функцию ( срабатывает при выборе ответа в анкете)

Я хочу знать, есть ли что-то очевидное, чего мне не хватает при использовании MTL и React, чтобы заставить компоненты работать? Была проблема с областью действия, но я, кажется, исправил ее следующим образом:

updateProgressBar: function(value) {
    // fixes scope in side function below
    var _this = this;

    document.querySelector('#questionnaireProgressBar').addEventListener('mdl-componentupgraded', function() {
        this.MaterialProgress.setProgress(value);
    })
},

В React у меня есть родитель, который передает ребенку данные через реквизит, и я использую «componentWillReceiveProps» для вызова функции, которая обновляет индикатор выполнения.

Я также использовал функцию «componentDidMount», чтобы увидеть, имеет ли это значение, но она по-прежнему работает только при загрузке страницы. Из того, что я прочитал, кажется, что я должен использовать «componentWillReceiveProps» вместо «componentDidMount».

Он подается от родителя из-за того, что компоненты отправляют данные друг другу. Я использовал их документы и некоторую помощь в Интернете, чтобы правильно обновить родительскую функцию, а затем обновить индикатор выполнения в отдельном компоненте.

updateProgressBarTotal: function(questionsAnsweredTotal) {
    this.props.updateProgressBarValue(questionsAnsweredTotal);
}

Родительская функция выглядит следующим образом (я думаю, что это может быть виновником):

// this is passed down to the Questions component
updateProgressBarTotal: function(questionsAnsweredTotal) {
    this.setState({
        progressBarQuestionsAnswered : questionsAnsweredTotal
    })
}

Я могу опубликовать еще немного кода, если это необходимо.

Спасибо


reactjs javascript material-design-lite
person Kam Banwait    schedule 18.01.2016    source источник
comment
У вас опечатка - MaterialProgress.setprogress должно быть MaterialProgress.setProgress   -  person hazardous    schedule 18.01.2016
comment
@HazardouS Спасибо, это была моя опечатка при вводе фрагмента кода вместо копирования и вставки .. Я проверил это снова, чтобы убедиться, что это не проблема, и я все еще получаю ту же ошибку.   -  person Kam Banwait    schedule 19.01.2016
comment
Пожалуйста, поместите его в скрипку для облегчения отладки, если это возможно.   -  person hazardous    schedule 19.01.2016
comment
Только что понял :) Спасибо, что заглянули. Я ответил на вопрос ниже фрагментом кода. Он находится в child, а не в родительском элементе, поскольку похоже, что родитель искал несуществующий узел DOM, отсюда и ошибка.   -  person Kam Banwait    schedule 19.01.2016

Ответы (3)


arrow_upward
3
arrow_downward

Похоже, мне нужен был свежий взгляд на это.

Я переместил функцию в дочерний элемент родителя. Кажется, что использование document.querySelector... в родительском элементе не находит элемент, но когда он перемещается в дочерний элемент, где я выполняю всю логику вопроса, кажется, что все в порядке. Теперь он правильно увеличивает прогресс и т. Д. :)

// goes to Questionnaire.jsx (parent) to update the props
updateProgressBarTotal: function(questionsAnsweredTotal) {
    // updates the state in the parent props
    this.props.updateProgressBarValue(questionsAnsweredTotal);
    // update the progress bar with Value from questionsAnsweredTotal
    document.querySelector('.mdl-js-progress').MaterialProgress.setProgress(questionsAnsweredTotal);
},
person Kam Banwait    schedule 19.01.2016
comment
хм, было бы неплохо увидеть и html (jsx). не могу понять, как вызвать метод. - person krivar; 28.02.2016

arrow_upward
0
arrow_downward

У меня была такая же проблема в приложении angular2. Вам не нужно переходить к дочернему компоненту.

После попыток найти разумное решение я обнаружил, что вам просто нужно убедиться, что mdl-componentupgradedсобытие уже произошло, прежде чем вы сможете использовать MaterialProgress.setProgress(VALUE). Затем его можно обновить с помощью динамического значения.

Вот почему переход к дочернему варианту работает. В родительском компоненте mdl-componentupgraded событие успело произойти до того, как вы обновите значение прогресса

Мое решение для angular2 в этом статья

Адаптировано в приложении React JS:

в componentDidMount поместите флаг mdlProgressInitDone (инициировано значение false) в обратном вызове mdl-componentupgraded:

// this.ProgBar/nativeElement 
// is angular2 = document.querySelector('.mdl-js-progress')
var self = this;
this.ProgBar.nativeElement.addEventListener('mdl-componentupgraded', function() {
  this.MaterialProgress.setProgress(0);
  self.mdlProgressInitDone = true; //flag to keep in state for exemple
});

Затем в componentWillReceiveProps проверьте флаг, прежде чем пытаться обновить значение прогресса:

this.mdlProgressInitDone ? this.updateProgress() : false;

updateProgress() {
this.ProgBar.nativeElement.MaterialProgress.setProgress(this.currentProgress);  
}
person MacKentoch    schedule 27.03.2016

arrow_upward
0
arrow_downward

После прикрепления индикатора выполнения к документу выполните:

function updateProgress(id) {
    var e = document.querySelector(id);
    componentHandler.upgradeElement(e);
    e.MaterialProgress.setProgress(10);
}

updateProgress('#questionnaireProgressBar');
person Italo Borssatto    schedule 15.01.2020