Javascript 材质设计组件切换效果不起作用

我正在尝试使用带有React的材质组件图标按钮。
材料设计：

它工作并显示元素和重复。但是切换不起作用。
这是我在devtool for chrome中的代码和元素树。
请教我解决办法。

import React，{useffect}来自“React”；
从“@material/icon-button”导入{mdciconbuttonogle}；
常量按钮状=（）=>{
useffect（（）=>{
const iconToggle=新的MDCIconButtonToggle(
document.querySelector（“.mdc图标按钮”），
);
iconToggle.on=true；
});
返回(
最喜欢的
最爱的边界
);
};
导出默认按钮式；

元素树

<button id="add-to-favorites" class="mdc-icon-button mdc-icon-button--on" aria-label="Add to favorites" aria-pressed="false">
  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
    favorite
  </i>
  <i class="material-icons mdc-icon-button__icon">
    favorite_border
  </i>
</button>

最喜欢的
最爱的边界

您在

useffect（）

内部实例化了

icontogle

，但忽略了

useffect（）

接受第二个参数的事实。没有它，每次重新渲染时都会重新运行该逻辑，这意味着您的

icontogle.on

每次都被设置回

true

，因此它保持在“开”

作为旁注，选择HTML元素的一种更具反应性的方法是通过

useRef（）

，而不是

document.querySelector（）

，后者可能会找到其他不需要的元素

import React, { useEffect, useRef } from 'react';
import { MDCIconButtonToggle } from '@material/icon-button';

const ButtonLike = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const iconToggle = new MDCIconButtonToggle(buttonRef.current);
    iconToggle.on = true;
  }, []);  // <-- You need to pass in an empty array
           //     to signal that you want this logic to run only once.

  return (
    <button
      ref={buttonRef}
      id="add-to-favorites"
      className="mdc-icon-button mdc-icon-button--on"
      aria-label="Add to favorites"
      aria-pressed="false"
    >
  );
}

import React，{useffect，useRef}来自“React”；
从“@material/icon-button”导入{mdciconbuttonogle}；
常量按钮状=（）=>{
const buttonRef=useRef（null）；
useffect（（）=>{
const icontogle=新的MDCICONButtontogle（buttonRef.current）；
iconToggle.on=true；
}，[]）；//它怎么不工作？它是保持“开”还是什么？谢谢你的提问，hackape。在这种情况下，它保持打开状态。因为“iconToggle.on”值集为“true”。如果它变为“false”，它保持关闭状态。“off”表示显示“favorite_border”图标。单击该图标时，ripple efect可以工作。我还没有编写，但也添加了scss模块。它似乎工作得很好。感谢您的回答！我更改了脚本并尝试了它，但结果没有更改。第一个脚本没有错误。还有其他问题吗？是的，我会。我是编程新手，所以我会在搜索完代码后发布ndbox是。多亏了你的大力帮助，hackape。@MIsoku我为你创建了一个，我不知道你那边发生了什么，但我的代码可以工作。GRAT！我看到你的脚本在sandbox上工作。我很感激！我会努力弄清楚我的脚本有什么不同。现在，我可以创建一个sandbox和代码，我会在我完成后发布这个问题的要点d找出两种代码之间的差异。
import React, { useEffect, useRef } from 'react';
import { MDCIconButtonToggle } from '@material/icon-button';

const ButtonLike = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const iconToggle = new MDCIconButtonToggle(buttonRef.current);
    iconToggle.on = true;
  }, []);  // <-- You need to pass in an empty array
           //     to signal that you want this logic to run only once.

  return (
    <button
      ref={buttonRef}
      id="add-to-favorites"
      className="mdc-icon-button mdc-icon-button--on"
      aria-label="Add to favorites"
      aria-pressed="false"
    >
  );
}