添加/重置新值时，MDC 组件不会更新 UI

Question

当它们的值通过JavaScript变化时，我正在尝试重新初始化/重新绘制形式元素的所有MDC组件，但到目前为止，我的尝试已经跌落了。有没有一种简单的方法可以通过我不知道的内置MDC方法来实现这一目标？

我创建了一种自定义方法，以使用data-mdc-reload HTML属性重新加载MDC组件，该属性在单击时触发，但这并不能力完成。

这是一个codepen，显示了问题：https：//codepen.io/oneezy/pen/xvmavp

• 单击UPDATE FORM VALUES按钮添加数据
• 红色的VALUE输出表示组件破裂/蓝色表示它的工作
• 单击RESET按钮以将数据重置为初始状态(这也已损坏(

javascript

    // MDC Reload Component
    function mdcReload(time = 1) {
        var components = mdc.autoInit();
        let reloadComponents = document.querySelectorAll('[data-mdc-reload]');
        for (const reloadItem of reloadComponents) {
            reloadItem.addEventListener("click", async () => {
                setTimeout(function() {
                    components.forEach((c) => c.layout && c.layout());
                }, time);
            });
        }  
    }
    // Initialize MDC Components
    mdcReload();

Answer 1

您可以使用MDC提供的基础和适配器。我建议您制作每个组件的MDC实例，并使用mdc.COMPONENT.foundation_.adapter_中的内置方法。

这是修改的笔

问题是您需要致电floatLabel(true)以使标签设置其值后浮动。

if (c.foundation_.adapter_ && c.foundation_.adapter_.floatLabel) {
  c.foundation_.adapter_.floatLabel(true);
}

此外，我将选择组件更改为

// $(MDCselect).val('Option 3');
// Instantiate the MDC select component.
const mdcSelect = mdc.select.MDCSelect.attachTo(document.querySelector('.mdc-select'));
mdcSelect.foundation_.adapter_.setValue('Option 3');

希望它有帮助！

Answer 2

我发现，通过JavaScript设置自定义值后，最简单的MDC组件标签的方法是将一个模糊事件发送给类似的输入：

yourMDCInput.dispatchEvent(new Event('blur'))

这将使MDC组件决定必须采取哪种操作，因此如果没有值集，则浮动标签，或重置标签。

这很烦人，但是如果没有挖掘MDC基金会的代码以找到更好的解决方案，我在文档中找不到任何更好的解决方案(无论如何，这些解决方案都不完整，部分错误(。

如果可以的话，请尝试使用MDC类实例设置您的值 - 在这种情况下，MDC组件将被告知更改，并将按预期行事。使用AutoInit时，请注意，文档说MDC类实例已将其附加到root <div>，而实际上将其连接到了<label>，其中设置了data-mdc-auto-init属性。

假设您将mdctextfield包裹在<div id='my-text-field'>中，则可以做类似：

的事情

document.querySelector('#my-text-field label').MDCTextField.value = 'hello world'

，该字段将按预期进行更新。