2

我无法让 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 未定义。

我已经查看了主要文档和this，但无法弄清楚我做错了什么。

4

2 回答 2

2

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

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

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

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

alert("yes")当它被点击时，我们想要。我们将按如下方式注册事件：

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

注意：事件名称是普通的 javascript 事件，如,"abort"等。"scroll""change"

于 2019-12-22T00:30:35.343 回答
1

因此，经过更多搜索后，我在MDC 对话框文档中找到了一个 listen() 方法。只需 ctrl+f 听，你会发现一些例子。

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

下面是我的解决方案。我首先得到一个包含所有可切换元素的 HTML 集合。然后我遍历它们，并添加 listen() 事件侦听器方法来侦听更改事件。一旦发生更改事件，按钮将执行 handleClick()/ 切换开/关。

// 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();
  });
});
于 2019-09-12T13:23:58.473 回答