使用 React 增加 Material Design Lite 进度条

Question

我现在有 MDL 运行 React，目前似乎工作正常。

我已根据需要在页面上显示进度条，当直接输入数字时，它会在页面加载时加载指定的 'progress'：

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(value) 时，我在每次之后都得到了正确的数字 (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 中，我有 parent 通过 props 向 child 提供数据，我正在使用 "componentWillReceiveProps" 调用更新进度条的函数。

我也使用了 "componentDidMount" 函数来查看它是否有所不同，但它仍然只适用于页面加载。从我读过的内容来看，我似乎应该使用 "componentWillReceiveProps" 而不是 "componentDidMount"。

它是从 parent 馈送的，因为组件在彼此之间发送数据。我已经使用他们的文档和一些互联网帮助来正确更新 parent 函数，然后更新单独组件中的进度条。

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

parent 函数如下所示（我认为这可能是罪魁祸首）：

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

如果需要，我可以 post 添加更多代码。

谢谢

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 应用程序中遇到了同样的问题。您不必移动到 child 组件。

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

这就是移动到 child 的原因。在 parent 组件中 mdl-componentupgraded 事件有时间在您更新进度值之前发生

我在这个 article

中对 angular2 的解决方案

在 React JS 应用程序中改编：

在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');

使用 React 增加 Material Design Lite 进度条

Incrementing the Material Design Lite Progress bar with React

javascript

reactjs

material-design-lite