如何使用 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);

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

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

我已经查看了 main docs, and this，但无法弄清楚我做错了什么。

Answer 1

所以在进一步搜索之后，我在 MDC Dialog documentation 中找到了一个 listen() 方法。只需按 ctrl+f 进行收听，您就会找到一些示例。

无论出于何种原因，这是第一个也是唯一一个我发现提到 listen() 方法的地方。如果有人知道 listen() 在哪里被明确记录，我很乐意为它提供 link 以了解更多信息。

以下是我的解决方案。我首先得到所有可切换元素的 HTML 集合。然后我遍历它们，并添加 listen() 事件侦听器方法来侦听更改事件。一旦change事件发生，按钮就会执行handleClick()/ toggle on/off.

// Get "array" of toggle-able arrow dropdowns.
var expandableArrowButtons = document.getElementsByClassName("mdc-icon-button add-margin-bottom");

// Iterate over all 3 expandable arrow icon buttons, and listen for a change event. 
[].forEach.call(expandableArrowButtons, function(element){
  const toggleBtn = new MDCIconButtonToggle(element);

  toggleBtn.listen('MDCIconButtonToggle:change', function(){
    console.log("clicked");

    const tb = new MDCIconButtonToggleFoundation(toggleBtn);
    tb.handleClick();
  });
});

Answer 2

找到解决方法做得很好。

但对于可能遇到同样问题的其他人来说，这里有一个关于如何直接在组件上正确监听事件的明确说明，button 作为示例：

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

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

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

someButton.listen('click', ()=> { alert("yes"); });

注意：事件名称是正常的 javascript 事件，例如 "abort"、"scroll"、"change" 等

如何使用 MDC-Web 方法（例如 MDCIconButtonToggle）

How to use MDC-Web methods (e.g. MDCIconButtonToggle)

javascript

mdc-components

material-components-web