Increase Material Volume Lite Progress Bar with Reagent

Question

I have an MDL working with React at the moment, and currently it is working fine.

I have a progress bar that appears on the page as needed, and it loads with the specified "progress" when the page loads with direct input of the number:

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

or when passing a number through a variable:

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

It stops working after that. I am trying to update a value through a variable and not being updated. I was recommended to use this:

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

to update the value, but it does not work. Even when you try it right in the console.

When trying through the Console, I get the following error:

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

, , "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

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