reactjs - 使用 React 切换字体真棒图标

Question

我想在点击时切换一个 fontAwesome 图标类名。单击时，图标应更改颜色并调用将对象添加到服务器中收藏列表的服务（因此，我使用 e.currentTarget 的原因：我需要记住单击了哪个图标）。此代码在第一次单击时有效，但在第二次单击时无法将类改回（进行检查，它说 FA 的类名等于“对象对象”）。知道我该如何解决吗？

    <FontAwesomeIcon onClick={this.ToggleClass} size={"sm"} icon={faHeart} />

    ToggleClass = (e) => {
      const heart = {
        color: "#E4002B",
      }

      const clicked = {
        color: "#E4002B",
        background: "red"
      }

      if (e.currentTarget.className.baseVal != heart && e.currentTarget.className.baseVal != clicked) {
        return e.currentTarget.className.baseVal === clicked;
#Callservicehere
      }
      else if (e.currentTarget.className.baseVal === clicked) {
        e.currentTarget.className.baseVal = heart;
#callservicehere
      }
    }

标签： reactjs

Answer 1

你还没有考虑 React :)

访问事件目标并命令式地操作 DOM 会绕过 React 的渲染——你可能只是在使用 jQuery。并不是说这有什么不好，但这不是在 React 中处理事情的正确方法。

在 React 中，如果您需要更改 DOM 以响应用户交互，您可以在 render 方法中进行，即根据组件的当前状态或 props 输出不同的 JSX。