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

Question

我正在尝试重新初始化/重绘所有 MDC components对于表单元素，当它们的值通过 javascript 改变时，但到目前为止我的尝试还不够。有没有一种简单的方法可以通过我不知道的内置 MDC 方法来实现此目的？

我创建了一种自定义方法，使用点击时触发的 data-mdc-reload html 属性来重新加载 MDC 组件，但这并不能完全完成工作。

这是显示该问题的代码笔:https://codepen.io/oneezy/pen/XvMavP

• 点击更新表单值按钮添加数据
• 红色的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_ 中的内置方法。

这里是修改后的pen

问题是您需要调用 floatLabel(true) 让标签在设置值后 float 。

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

希望对你有帮助!