2

当表单元素的值通过javascript更改时，我正在尝试重新初始化/重绘所有MDC组件，但到目前为止我的尝试都失败了。有没有一种简单的方法可以使用我不知道的内置 MDC 方法来实现这一点？

我创建了一种自定义方法来重新加载 MDC 组件，其中包含一个data-mdc-reload在单击时触发的 html 属性，但这并不能很好地完成工作。

这是一个显示问题的代码笔： 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();
4

2 回答 2

2

您可以使用MDC 提供的Foundations和Adapters 。我建议您为每个组件创建一个 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');

希望能帮助到你 ！

于 2019-08-12T23:18:16.703 回答
1

我发现在通过 javascript 设置自定义值后刷新 MDC 组件标签的最简单方法是将 Blur 事件发送到输入，如下所示：

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

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

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

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

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

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

并且该字段将按预期更新。

于 2021-07-11T14:26:34.123 回答