时间戳

首页 > 解决方案 > 带有 Reactjs 的计数器按钮

javascript - 带有 Reactjs 的计数器按钮

问题描述

我是学习 reactjs 的初学者，我正在制作一个小应用程序，它只是为了写帖子，我想为每个帖子制作一个点赞按钮和计数器，我尝试使用 state 但它使用相同的计数器这里的所有帖子都是 MyPosts.jsx 文件

import React from 'react'

export default (props) => {
let likes=0;
return <div className="Post">
  <h4>{props.post} </h4>
  <p>{props.like}</p>
  <button onClick={() =>props.LikesCount(props.like)}>Like</button>
  <button onClick={()=>props.deletePost(props.index)} >Delete</button>
</div>
}
export const Post = () => {
return <div>
   post export

</div>
}

以及从 app.js 文件中计算喜欢和状态的功能

   state = {
    like:0,
    posts: []
}
  LikesCount = (like) => {

    this.setState({ like: this.state.like + 1})
  }

知道如何在不使用状态的情况下为每个帖子制作计数器吗？谢谢你。

标签： javascripthtmlreactjs

解决方案

目前，您的代码的问题是您使用 1 个like变量，而 posts 是一个数组。我假设这是从数组deletePost(some index)中删除带有一些正索引的帖子。posts

解决方案 1

您可以将likes状态转换为数组。所以，当你这样做props.LikesCount(props.index)并在LikesCount函数内部时，

LikesCount = (index) => {

    this.state.likes[index] += 1;
  }

现在当你删除一个帖子时，你还需要在likes数组中拼接相同的索引。

解决方案 2

您可以创建posts一个对象数组，其中每个对象代表这个：

{
   likes: 0,
   post: ''
}

推荐阅读