如何在 ReactJS 中创建 Instagram 点赞按钮？

大多数情况下，您都使用过 Instagram 并查看过每篇文章下方的点赞按钮。Instagram 点赞按钮有两个需要注意的地方：一个是它的形状是心形，我们需要创建它；另一个是当我们点赞某人的帖子时，它会填充红色。

创建 Instagram 点赞按钮有两种不同的方法。一种是从头开始使用 CSS 和 JavaScript 创建，另一种使用两个不同的图标。一个是填充的，另一个是轮廓的。

使用 Material UI 库

我们将使用 Material UI 库中的 FormControlLabel 组件。它包含各种组件，例如复选框、开关、单选按钮等，用于处理表单数据。

在我们的例子中，我们可以在 FormControlLabel 组件内部使用“复选框”组件。此外，我们可以从 Material UI 库导入 FavouriteIcon 和 FaviouriteBorderIcon，并将它们用作复选框组件的选中和未选中值。

语法

用户可以按照以下语法使用 Material UI 的各种组件来创建 Instagram 点赞按钮。

<FormControlLabel
   control = {
      <Checkbox
         icon = {<FavoriteBorderIcon />}
         checkedIcon = {<FavoriteIcon />}
      />
   }
   Label = "Like"
/>

在上面的语法中，我们将不同的图标作为图标的 props 和 checkedIcon prop 传递。

示例

在下面的示例中，我们从 Material UI 库导入了两个不同的组件和两个图标。我们在 FormControlLabel 组件中将复选框组件用作 control props 的值。

此外，在复选框组件中，我们传递了两个图标作为 prop。我们使用 Material UI 中的 FaviouriteBorderIcon 作为 icon prop 的值，以在按钮未点击时显示轮廓的心形。此外，我们使用 FavouriteIcon 作为 checkedIcon prop 的值，以在用户点击按钮时显示填充的心形图标。

import React from "react";
import FormControlLabel from "@mui/material/FormControlLabel";
import FavoriteIcon from "@mui/icons-material/Favorite";
import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
import Checkbox from "@mui/material/Checkbox";

function App() {
   return (
      <div style = {{ padding: "10px" }}>
         <h2>
            {" "}
            Creating the Instagram Like button in ReactJs using{" "}
            <i> Materia UI FormControlLabel </i> component.{" "}
         </h2>
         {/* showing different icons according to whether the checkbox is checked.   */}
         <FormControlLabel
            control = {
               <Checkbox
                  icon = {<FavoriteBorderIcon />}
                  checkedIcon = {<FavoriteIcon />}
               />
            }
            label = "Like"
         />
      </div>
   );
};
export default App;

输出

在上面的输出中，用户可以观察到，当他们点击时，图标会变为填充，当他们再次点击时，图标会像以前一样变为轮廓。

使用 CSS 创建心形图标并使用 React hooks 管理其颜色

我们可以使用自定义 CSS 创建心形。如果您想象一下，心形就像一个旋转 45 度的正方形，以及两侧的两个半圆。

此外，我们可以管理正方形和两个圆的边框，以便我们可以使其看起来像一个心形。之后，我们可以在用户点击心形按钮时设置背景颜色。

语法

用户可以按照以下语法使用 React hooks 管理填充和轮廓的心形图标。

{clicked ? (
   <span onClick = {handleClick} class = "heart-clicked"> </span>
) : (
      <span onClick = {handleClick} class = "heart"> </span>
   )}

在上面的语法中，当 clicked 变量变为 true 时，它会显示带有“heart-clicked”类名的图标，该图标已填充。否则，它会显示带有“heart”类名的图标，该图标为轮廓。

示例

在下面的示例中，我们使用 useState() hook 来跟踪点击或未点击按钮的用户，并根据此切换 clicked 变量的值。

在 HTML 部分，我们根据用户是否点击按钮显示带有不同类名的不同 span 组件。

文件名：App.js

import React from "react";
import { useState } from "react";
import "./App.css";

function App() {
   const [clicked, setClicked] = useState(false);
   function handleClick(event) {
      setClicked(!clicked);
   }
   return (
      <div style = {{ padding: "10px" }}>
         <h2>
            {" "}
            Creating the Instagram Like button in ReactJs using <i>
               {" "}
               CSS only{" "}
            </i>{" "}
         </h2>
         <h3> Click and unclick the below button to Like and UnLike. </h3>
         {clicked ? (
            <span onClick = {handleClick} class = "heart-clicked"> </span>
         ) : (
            <span onClick = {handleClick} class = "heart"> </span>
         )}
      </div>
   );
}
export default App;

文件名 – App.css

在下面的 CSS 代码中，我们管理两个类。“heart”类包含轮廓心形的样式，“heart-clicked”类包含填充心形的样式。

为了创建心形，我们首先创建了正方形。之后，我们在心形的前面和后面添加了圆圈。此外，我们通过删除两侧的边框切掉了半圆。此外，我们以某种方式旋转了正方形和圆圈，使其看起来像完美的心形。

.heart,
.heart-clicked {
   border: 1px solid red;
   border-top: none;
   border-right: none;
   display: inline-block;
   height: 30px;
   margin: 0 10px;
   position: relative;
   top: 0;
   transform: rotate(-45deg);
   width: 30px;
}
.heart-clicked {
   background-color: red;
}
.heart:before,
.heart:after,
.heart-clicked:before,
.heart-clicked:after {
   content: "";
   border: 1px solid red;
   border-radius: 50%;
   height: 30px;
   position: absolute;
   width: 30px;
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
}
.heart-clicked:before,
.heart-clicked:after {
   background-color: red;
}
.heart:before,
.heart-clicked:before {
   top: -15px;
   left: 0;
   border-bottom: none;
   border-left: none;
   transform: rotate(-45deg);
}
.heart:after,
.heart-clicked:after {
   left: 15px;
   top: 0;
   border-bottom: none;
   border-left: none;
   transform: rotate(45deg);
}

输出

在本教程中，我们学习了两种创建 Instagram 点赞按钮的方法。如果用户想要一种简单的实现方式，他们应该使用第一种方法，即使用 Material UI 库。如果用户想要更多自定义选项，他们应该使用第二种方法，即使用自定义 CSS。

但是，这两种方法都易于实现，并且非常适合初学者。

更新于： 2023年2月27日

2K+ 阅读量

启动您的 职业生涯

通过完成课程获得认证

开始学习
广告