React16 Like / DisLike按钮以及计数

Question

我是Reactjs（V16）的新手。我有一些需求，如何实现“喜欢”按钮和“不喜欢”按钮以及计数。有人请帮助我。

Answer 1

在stackoverflow中，通常我们期望您尝试了什么，遇到了什么问题。

但是我为您树立了榜样。https://codesandbox.io/s/late-sea-st1qm

我使用了fontawesome图标：（需要安装3个软件包才能起作用，但是您可以使用图标库）https://github.com/FortAwesome/react-fontawesome

Post.js（这里有thumbsUp和thumbsDown按钮并显示数据，

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faThumbsUp, faThumbsDown } from "@fortawesome/free-solid-svg-icons";
import "./Post.css";

export default function Post({ post, like, dislike }) {
  return (
    <div className="flexcontainer">
      <FontAwesomeIcon
        icon={faThumbsUp}
        style={{ cursor: "pointer" }}
        onClick={() => like(post.id)}
      />
      {post.likeCount} - {post.text}
      <FontAwesomeIcon
        icon={faThumbsDown}
        style={{ cursor: "pointer" }}
        onClick={() => dislike(post.id)}
      />
      <hr />
    </div>
  );
}

App.js（状态和状态管理保留在App.js中）如果您不知道react useState，请查看react文档。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Post from "./Post";

const initialPosts = [
  { id: 1, text: "Post 1", likeCount: 0 },
  { id: 2, text: "Post 2", likeCount: 0 },
  { id: 3, text: "Post 3", likeCount: 0 }
];

function App() {
  const [posts, setPosts] = useState(initialPosts);

  const like = id => {

    const updatedPosts = posts.map(post => {
      if (post.id === id) {
        return { ...post, likeCount: post.likeCount +1 };
      } else {
        return post;
      }
    });
    setPosts(updatedPosts);
  };

  const dislike = id => {
    const updatedPosts = posts.map(post => {
      if (post.id === id) {
        return { ...post, likeCount: post.likeCount -1 };
      } else {
        return post;
      }
    });

    setPosts(updatedPosts);
  };

  return (
    <div className="App">
      {posts.map(post => (
        <Post key={post.id} post={post} like={like} dislike={dislike} />
      ))}
    </div>
  );
}