0

我正在使用 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>
你能帮助我吗？谢谢

4

1 回答 1

0

奇怪的是，它现在可以删除const textField =...

这是新的 JS 代码：

// MDC
const mdc = window.mdc;

// Auto init
mdc.autoInit();

$('.mdc-text-fields').each((index, element) => {
    mdc.textField.MDCTextField.attachTo(element);
});
<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>

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

于 2019-12-13T11:26:14.210 回答