javascript - 如何使用 MDC-Web 方法(例如 MDCIconButtonToggle)

Question

我在使 MDC-Web 方法/框架方法正常工作时遇到问题。具体来说，我正在尝试让 MDCIconButtonToggle 工作。我有一个图标按钮，单击时可以更改。我认为我的设置方式是正确的，但是单击时它不会切换。

import {MDCIconButtonToggle} from '@material/icon-button';
import {MDCIconButtonToggleFoundation} from '@material/icon-button';

const iconButtonRipple = new MDCRipple(document.querySelector('.mdc-icon-button'));
iconButtonRipple.unbounded = true;

function handleToggleButtonClick(){
  console.log("clicked");
  const toggleBtn = new MDCIconButtonToggleFoundation(expBtn);
  toggleBtn.handleClick();
}

var expBtn = document.getElementById("config-audio-button");
expBtn.addEventListener("click", handleToggleButtonClick);

当我运行此命令时，每次单击按钮“单击”都会按预期显示在控制台中，但图标不会更改/切换。如果我将 MDCIconButtonToggleFoundation 更改为 MDCIconButtonToggle，我会在控制台中收到错误消息，但按钮会切换。

错误消息声称expBtn.addEventListener不是函数，或者handleClick未定义。

我浏览过 main docs ，和this ，但一直无法弄清楚我做错了什么。

Answer 1

很好地找到了解决此问题的方法。

但是对于可能遇到同样问题的其他人来说，这里是如何正确地直接监听组件上的事件的明确方法，以按钮为例:

假设我们下面有一个按钮:

const someButton = new MDCIconButtonToggle(document.querySelector('.someButton'));

我们希望在点击时alert("yes")。我们将按如下方式注册事件:

someButton.listen('点击', ()=> {alert("是"); });

注意: 事件名称是一个普通的 javascript 事件，例如 "abort"、"scroll"、"change" 等。