如何在反应中使用 onClick 增加一个值

Question

按下时我有一个按钮 onClick 触发器 LikeComment 使用当前评论 ID 和发布评论的用户将赞发布到数据库。

    <button className="btn" onClick={LikeComment(comment_id, user_id)}>
      <div className="text">
        <i className="fas fa-thumbs-up"></i>
        <p>{comment_likes.length}</p>
      </div>
    </button>

按下按钮时递增 comment_likes.length 的最佳方法是什么。现在我的问题是该值仅在页面刷新时更新。

我试过这样做，但效果不理想

<p>{comment_likes.length && LikeComment ? (comment_likes.length+1) : (comment_likes.length)}</p>

我想通过检测何时按下 LikeComment 以将原始值增加 1 来实现此目的。

任何解决此问题的技巧将不胜感激..

Answer 1

首先你需要在组件的本地状态中存储当前的点赞数。这样你就可以只显示当前的点赞数量，如果你更改 buttonLikes 数量，React 会自动更新显示。

const [buttonLikes, setButtonLikes] = useState(comment_likes)

然后你需要一个事件处理程序来增加类似的数量和post你对数据库的更改


    const handleClickLikeButton = (comment_id, user_id) => {
        setButtonLikes((prevValue) => prevValue + 1)
        LikeComment(comment_id, user_id)
    }

现在您的显示逻辑将如下所示

   <button className="btn" onClick={handleButtonLike(comment_id, user_id)}>
      <div className="text">
        <i className="fas fa-thumbs-up"></i>
        <p>{buttonLikes}</p>
      </div>
    </button>

Answer 2

你可以使用

const [likesCount, setlikesCount] = useState(0)

然后像这样创建一个函数：

 const callapiforlike=(comment_id, user_id){
   // call some api
  }
 const handleLikeCountIncrement= (comment_id, user_id) => {
        setlikesCount(likesCount + 1)
        callapiforlike(comment_id, user_id)

    }

以及点赞按钮

<button className="btn" onClick={handleLikeCountIncrement(comment_id, user_id)}>
      <div className="text">
        <i className="fas fa-thumbs-up"></i>
        <p>{likesCount}</p>
      </div>
    </button>

如何在反应中使用 onClick 增加一个值

How to increment a value using onClick in react

javascript

conditional-operator

reactjs