用反作用力递增材料设计进度条

Question

目前，我已经让MDL运行起来，并且它现在似乎运行得很好。

我已经根据需要在页面上显示了“进度”栏，当直接输入一个数字时，它会在页面加载上加载指定的“进度”：

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并做出反应使组件工作时，是否有明显的遗漏？有一个问题的范围，但我似乎已经解决了以下几点：

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

我在angular2应用程序中也遇到了同样的问题。您不需要转移到子组件。

我发现，在很难找到一个合理的修复方法之后，您只需确保mdl-componentupgraded事件在能够使用 MaterialProgress.setProgress(VALUE)之前就已经发生了。然后用动态值对其进行更新。

这就是为什么搬到孩子家工作的原因。在父组件中，在更新进度值之前有时间发生mdl-componentupgraded事件。

在这个 文章中为angular2提供我的解决方案

适应于React应用程序的 :

在componentDidMount中，在mdl-componentupgraded回调中放置一个标志mdlProgressInitDone (初始化为false)：

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

Answer 3

将进度条附加到文档后，执行：

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

updateProgress('#questionnaireProgressBar');