Question

此刻我已经使用React运行了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和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”函数来查看它是否有所作为，但它仍然只适用于页面加载。从我读过的内容来看，似乎我应该在“componentDidMount”上使用“componentWillReceiveProps”。

由于组件之间相互发送数据，它正从父节点馈送。我已经使用他们的doc和一些互联网帮助来正确更新父函数，然后更新单独组件中的进度条。

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应用程序中遇到了同样的问题。您没有必要转移到子组件。

我在努力寻找合理的解决方案之后发现，您必须确保{strong 1}}事件已经发生才能使用 mdl-componentupgraded。然后可以使用动态值进行更新。

这就是搬到孩子身边的原因。在父组件中MaterialProgress.setProgress(VALUE)事件在更新进度值

之前有时间发生

我在article

中对angular2的解决方案

改编自React JS应用程序：

在mdl-componentupgraded中

，在componentDidMount回调中放置一个标记mdlProgressInitDone（已启动为假）：

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

Answer 3

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

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

updateProgress('#questionnaireProgressBar');

使用React增加Material Design Lite进度条

3 个答案: