Question

当通过JavaScript更改表单元素的值时，我正在尝试重新初始化/重绘所有MDC components，但是到目前为止，我的尝试还不够。有一个我不知道的内置MDC方法可以轻松实现这一目标吗？

我创建了一种自定义方式来重新加载带有data-mdc-reload html属性的MDC组件，该属性会在点击时触发，但这并不能很好地完成工作。

以下是显示该问题的一个代码笔：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提供的 Foundations 和 Adapters 。我建议您为每个组件创建一个MDC实例，并使用mdc.COMPONENT.foundation_.adapter_中的内置方法。

这是经过修改的pen

问题在于，设置标签的值后，您需要调用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 组件标签的最简单方法是向输入发送一个 Blur 事件，如下所示：

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

这将使 MDC 组件决定它必须采取的操作，因此如果设置了值，它会浮动标签，或者如果没有设置值则重置标签。

这很烦人，但没有深入研究 MDC 基金会的代码以找到更好的解决方案，我在文档中找不到任何更好的解决方案（无论如何都是不完整的，而且部分是错误的）。

如果可以，请尝试使用 MDC 类实例来设置您的值 - 在这种情况下，MDC 组件会收到有关更改的通知并将按预期运行。使用 autoInit 时，请注意文档说 MDC 类实例附加到根 <div>，而它实际上附加到设置了 <label> 属性的 data-mdc-auto-init。

假设您将 MDCTextField 包装在 <div id='my-text-field'> 中，您可以执行以下操作：

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

该字段将按预期更新。

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

2 个答案: