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

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

此解决方案参考：

MDC - 无法初始化文本输入

MDC - Text Input can't be initialized

javascript

material-components

mdc-components

material-components-web