CSS样式记住用户投票（向上和向下投票）

Question

.downVote {
 align-items: center;
 font-size: 1.0em;
 padding-top: 2px;
 margin-right: 3px;
 float: right;
 color: #fb655a;
 cursor: pointer;
}

.downVote:hover {
 border-width: 0px;
 background-color: #fb655a;
 color: #000;
}

我想找到一种方法，使悬停属性在投票后保持活动状态，这是:active（？）状态，并让Javascript或Firebase记住为该用户保持投票图标处于该状态。所以当一个用户投了几个名字，然后再回到页面时，他们会看到他们投了哪些名字，他们投的是什么。

我正在寻找如何实现这一目标的想法。

目前，在firebase中，我将用户的身份验证ID(uid)保存在他们投票的每个人的名字中，或者是1或者是-1表示支持或支持。我确信可以使用该变量，但我不确定如何将其绑定到JavaScript或CSS中。

这里是可以投票的每个人的名字的布局（带有投票图标）

    handleUpvote(id){
    this.props.upvotePlayer(id)
}

handleDownvote(id){
    this.props.downvotePlayer(id)
}

render(props){
    return(
        <div className="player fade-in">
            <span className="vote up"
            onClick={() => this.handleUpvote(this.playerId)}>
            &#9650;
            </span>
            <p className="playerContent">{this.playerContent}</p>
            <span className="vote down" 
            onClick={() => this.handleDownvote(this.playerId)}>
            &#9660;
            </span>

        </div>
    )
  }
}

Answer 1

我不确定您是如何传递道具的，但如果this.playercontent对应于屏幕截图中的字符串“test”，那么组件中的this.poolers应该对应于具有投票人的对象。

如果这是正确的，那么我将使用我的uid在这个对象中搜索一个键，并检查该值是否为1。

this.voters[myUid] === 1

您需要将您的uid作为道具传入。或者在componentDidmount中调用auth（）以确保您的uid是可访问的。

this.voters[myUid] === 1 && 'alreadyVotedOn'

<span 
  className={{`vote up ${this.state.votedOn[name] === 1 && 'alreadyVotedOn'}`}} 
  onClick={() => this.handleUpvote(this.playerId)}>
   &#9650;
</span>

那应该能奏效。

重复使用-1表示downvote按钮。

您不必在className属性中全部完成这些操作。您还可以添加自定义数据属性，如前面的注释中建议的@doppl3r。这个过程是一样的，只是保持你的className属性更干净。