MDC-无法初始化文本输入

Question

我正在使用MDC设置文本输入，但是当我使用JS初始化时，会出现此错误：

这是我的代码：

// MDC
const mdc = window.mdc;

// Auto init
mdc.autoInit();

$('.mdc-text-fields').each((index, element) => {
  const textField = mdc.textField.MDCTextField.attachTo($(element)[0]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@4.0.0/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js">

<div class="mdc-text-field">
    <input class="mdc-text-field__input" type="text">
    <label class="mdc-floating-label" for="class_name">Nome classe</label>
    <div class="mdc-line-ripple"></div>
</div>

你能帮助我吗？ 谢谢

Answer 1

奇怪的是，它现在可以删除// MDC const mdc = window.mdc; // Auto init mdc.autoInit(); $('.mdc-text-fields').each((index, element) => { mdc.textField.MDCTextField.attachTo(element); });

这是新的JS代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@4.0.0/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js">

<div class="mdc-text-field">
    <input class="mdc-text-field__input" type="text">
    <label class="mdc-floating-label" for="class_name">Nome classe</label>
    <div class="mdc-line-ripple"></div>
</div>

abc.computeIfPresent("disabled", (k,v) -> {
    v.put("group", yourValue);
    return v;
});

此解决方案的参考：https://stackoverflow.com/a/52021265/7520280