制作一个与 jquery 反应的切换按钮不起作用

Posted 2023-03-08

【中文标题】制作一个与 jquery 反应的切换按钮不起作用

【英文标题】：Making a toggle button in react with jquery not working

【发布时间】：2021-11-20 01:21:01

【问题描述】：

我的 React Web 应用程序遇到了问题。想要制作一个投票系统，如果您点击“喜欢”按钮，它会改变颜色，并且只能被点赞一次。如果您再次点击它，它会回到“中性”并且类似计数会减少。不喜欢按钮也是如此。例如，如果你有喜欢的东西，但你击中了不喜欢的东西，那么喜欢的东西就会变回中性，不喜欢的东西就会改变颜色。基本上就像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 是类似的按钮。您可以忽略第一个按钮。

【参考方案1】：

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

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

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

【讨论】：

是的，我想，jquery根本不适合，一开始很难让它工作谢谢你的建议，这种改变颜色的方式要好得多，我会更新我的代码.你对绕过标志总是重置有什么建议吗？

@AndrewViera Re: flag (and others) 总是重置，不要在函数体中声明它/它们，让它/它们成为组件状态的一部分，或使用 React ref 来存储值，以便它/它们通过重新渲染持续存在。

哦，是的，这很有道理，哈哈，我只是将变量移到函数上方，现在它可以正常工作了。谢谢！

所以作为一般规则，我应该永远不要将 jquery 与 react 一起使用吗？

@AndrewViera 是的，在大多数情况下。原因是它们有相当正交的方法来处理 UI 更新，并且 jquery 用于抓取 DOM 元素的所有有用方面都可以在 React 中使用 refs 来处理。