Javascript MDC组件赢得'；t添加/重置新值时更新用户界面

当表单元素的值通过javascript更改时，我尝试重新初始化/重画所有表单元素，但到目前为止，我的尝试没有成功。有没有一种简单的方法可以通过我不知道的内置MDC方法实现这一点

我创建了一种自定义方法，通过单击激发的

data-MDC-reload

html属性重新加载MDC组件，但这并不能完全完成工作

下面是一个代码笔，显示问题：

• 单击

  更新表单值

  按钮添加数据

• 值

  输出为红色表示部件损坏/蓝色表示部件正常工作
• 单击

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

您可以使用MDC提供的基础和适配器。 我建议您为每个组件创建一个MDC实例，并使用

MDC.component.foundation\uu.adapter\uu

中的内置方法

这是修改后的

问题是您需要调用

floatLabel（true）

，以便在设置标签的值后使其浮动

if（c.foundation\u.adapter\u&&c.foundation\u.adapter\u.floatLabel）{
c、 基础适配器浮动标签（真）；
}