MDC-无法初始化文本输入

时间:2019-12-12 15:06:03

标签: javascript material-components mdc-components material-components-web

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

这是我的代码:

// 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>
你能帮助我吗? 谢谢

1 个答案:

答案 0 :(得分:0)

奇怪的是,它现在可以删除// 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