在使用jquery的react中创建切换按钮不起作用

Question

我的react web应用程序遇到了一个问题。我想做一个投票系统，如果你点击点赞按钮，它就会改变颜色，并且只能点赞一次。如果你再次击中它，它会回到“中性”状态，并且like计数会减少。不喜欢按钮也是如此。例如，如果你有喜欢的东西，而你点击了“不喜欢”，那么“喜欢”就会回到正常状态，而“不喜欢”就会改变颜色。基本上喜欢YouTube的视频类系统。不过，我在使用我的方法时遇到了这个问题：

const[score,setScore] = useState(0);
    const[dislike,setDislike] = useState(0);
    const[buttonState,setButtonState] = useState(true);
    var boolD = true;
    var boolL = true;
    const incrmentLike = () => {
        setScore(idea.score +=1)
        console.log(idea.score)

    }

    var disliked = false;
const incrmentDislike = () => {
        setDislike(idea.dislike +=1)
}
var flag = 0;
    function toggleDislike(){
    if(flag===0){
        console.log(flag)
        flag=1;
        incrmentDislike()
        console.log(flag)
        disliked = true;
    }
    else if(flag===1){
        setDislike(idea.dislike -=1)
        disliked = false;
        flag=0;
        console.log(flag)
    }
    
    }


return(
    <div className="idea-details">
        {isPending && <div>Leading...</div>}
        {idea && (
            <article>
                <h2>{idea.ideaTitle}</h2>
                <p>Written by {idea.author}</p>
                <div>{idea.body} </div>
                <div>{idea.score} Likes {idea.dislike} Dislikes</div>
            </article>
        )}
        <a type="button" className={classNameLU} id="button2" title="button" onClick={() => incrmentLike()}>Like!</a>
        <div
            className="btn btn-warning btn-lg"
            style={{ backgroundColor: dislike ? "#35b5f1" : "#8b8b8b" }}
            id="toggleDiv"
            onClick={toggleDislike}
            >
            Dislike
        </div>
    </div>
);

}基本上，标志总是被重置为0，并且该方法永远不会到达标志为== 1的if语句。我认为这是因为useState()以某种方式重置了变量。我想知道我能不能得到帮助来解决这个问题？我现在只在处理“不喜欢”按钮。setScore是like按钮。您可以忽略第一个按钮。

Answer 1

React和jquery通常不能混合使用。问题是jquery直接在React组件生命周期之外操作DOM，所以React不会被触发来重新呈现UI。此外，是的，flag在每个渲染周期被重置为0，它不会保持在任何状态或React ref中，因此它的值不会从render保存到render。坚持使用React状态从render到render持久值。

将背景颜色移动到style道具，并使用不喜欢状态有条件地设置其中一种背景颜色或另一种背景颜色。

<div
  className="btn btn-warning btn-lg"
  style={{ backgroundColor: disliked ? "#35b5f1" : "#8b8b8b" }}
  id="toggleDiv"
  onClick={toggleDislike}
>
  Dislike
</div>