Приращение конструкции материала Lite Полоса хода с реактивом

Question

У меня есть 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 ...) после каждого события щелчка, который запускает функцию (он срабатывает, когда ответ выбран в вопроснике)

Что я хочу знать, если есть что-то очевидное, m отсутствует при использовании 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 
    }) 
} 

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

Спасибо

Answer 1

кажется мне нужен новый набор глаза на это.

Я переместил функцию к дочернему элементу родителя. Кажется, что с использованием 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); 
}, 

Answer 2

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

I found after struggling to find a reasonable fix that you simply have to be sure mdl-componentupgraded event already occurred before being able to useMaterialProgress.setProgress(VALUE) . Then it can be updated with dynamic value.

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

Мое решение для angular2 в этом article

адаптированного в React применения JS:

в componentDidMount, место флаг mdlProgressInitDone (, инициированный по умолчанию) в mdl-componentupgraded callback:

// 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); 
}