使用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
      }
    }

Answer 1

你还没想到React :)

访问事件目标并强制操作DOM会绕过React的渲染 - 您可能只是使用jQuery。并不是说这有什么不好的，但这不是在React中做事的正确方法。

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

Answer 2

这里有几件事可能会有所帮助：

1. clicked和heart都是对象，这意味着如果不使用深度比较方法就无法比较它们。

var a = { id: 1 }
var b = { id: 1 }

console.log(a == b)    //false
console.log(a === b)   //false

2. 如果要比较它们，可以使用toString()方法将它们转换为字符串

heart.toString() === clicked.toString() 

3. 在你的第一个qazxsw poi条件中，看起来你正在返回一个真/假值，而不是为你的目标指定一个所需的类名。

if

4. 您还可以采用将类名保持为字符串并在css中添加样式对象的方法

return e.currentTarget.className.baseVal === clicked // true/false


e.currentTarget.className.baseVal = clicked // assigned

Answer 3

我知道了。您希望在用户点击时填充/取消心脏的颜色。结果不符合您的期望的原因是因为事件。使用FontAwesome，目标特别时髦。您可能认为您正在点击它，但它以一种方式操纵DOM，当您尝试提取className时，它的值通常是不一致的。

这就是为什么每个人都建议您使用React的状态。确定元素样式的逻辑现在更多地由组件本身而不是FontAwesome库控制。考虑下面的代码，我们只关心项目是否被点击，而不是它最初的类。

class MysteryComponent extends React.Component {
  state = {
    className: 'heart'
  }

  toggleClass = (e) => {
    if (this.state.className === 'heart') {
      this.setState({ className: 'clicked' })
    } else if (this.state.className === 'clicked') {
      this.setState({ className: 'heart' })
    }
  }

  render() {
    return (
      <div className={this.state.className}>
        <FontAwesomeIcon onClick={this.toggleClass} size={"sm"} icon={faHeart} />
      </div>
    )
  }
}

// css 
.heart {
  color: "#E4002B";
}

.clicked {
  color: "#E4002B";
  background: "red";
}