材质组件：MDCCheckbox中的更改事件无法正常工作

Question

我正在使用material components的MDCCheckbox组件。这是html代码

<div class="mdc-checkbox" data-mdc-auto-init="MDCCheckbox">
  <input type="checkbox"
         class="mdc-checkbox__native-control"/>
  <div class="mdc-checkbox__background">
    <svg class="mdc-checkbox__checkmark"
         viewBox="0 0 24 24">
      <path class="mdc-checkbox__checkmark__path"
            fill="none"
            stroke="white"
            d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
    </svg>
    <div class="mdc-checkbox__mixedmark"></div>
  </div>
</div>

我想听听这个元素的更改事件，所以我添加了监听器

const cbEl = document.querySelector('.mdc-checkbox');

cbEl.addEventListener('MDCCheckbox:change', ({detail}) => {
    console.log(detail)
});

但这不起作用。这同样适用于MDCIconToggle组件。这是正确的方法吗？

我怎样才能将其状态设置为不确定？

当我点击复选框时，涟漪效应会冻结。怎么解决这个？ 文档太差了。

Answer 1

请尝试

const cbEl = document.querySelector('.mdc-checkbox');
var checkbox = document.querySelector('.mdc-checkbox input');//Find your checkbox input

checkbox.addEventListener('click', () => {
    console.log(cbEl.checked); //will return true or false
});