使用 React 递增 Material Design Lite 进度条

Incrementing the Material Design Lite Progress bar with React

本文关键字：Lite Design React 递增 Material 使用      更新时间：2023-09-26

我目前让 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(…)

当我尝试通过变量增加值时，我没有收到任何错误，当我控制台.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 中，我让父母通过 props 向孩子提供数据，我使用 "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
    })
}

如果需要，我可以发布更多代码。

谢谢

看起来我需要一双新的眼睛来看待这个问题。

我将函数移动到父级的子级。似乎在父级中使用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);
},

我在 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);  
}
将

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

function updateProgress(id) {
    var e = document.querySelector(id);
    componentHandler.upgradeElement(e);
    e.MaterialProgress.setProgress(10);
}
updateProgress('#questionnaireProgressBar');
相关文章：