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方法中进行操作，即根据组件的当前状态或道具输出不同的JSX。

Answer 2

可能在这里有帮助的几件事：

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

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

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

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

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

在第一个if条件下，看起来您正在返回一个true / false值，而不是为目标分配了所需的类名。

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


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

您还可以采用以下方法：将类名保留为字符串，并将样式对象添加到CSS内

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";
}

Answer 3

我明白了。您想在用户单击时填充/填充心脏的颜色。结果未达到您的期望的原因是由于事件。FontAwesome的目标特别时髦。您可能会认为您在单击它，但是它以某种方式操纵DOM，当您尝试提取className时，它的值通常是不一致的。

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

class Example extends React.Component{
    state = {
        clicked: false
    }

    handleOnCLick = () => {
        this.setState({
            clicked: !this.state.clicked
        })
    }

    render(){

        var clicked = this.state.clicked

        return(
        <button onClick={this.handleOnClick}>
            <i
                class={ clicked ? "fas fa-heart" : "fas fa-circle"}
            </i>
        </button>

        )
    }
}

使用React切换字体真棒图标

3 个答案: