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

首先，您已经使用过Instagram，并查看了每个帖子下面的“赞”按钮。关于Instagram“赞”按钮有两件事需要注意：一是它的形状是心形，我们需要创建这个形状；二是当我们点赞某人的帖子时，它会以红色填充。

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

使用Material UI库

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

在我们的案例中，我们可以在FormControlLabel组件中使用“checkbox”组件。同时，我们可以从Material UI库中导入FavouriteIcon和FavouriteBorderIcon，将它们用作复选框组件的选中和未选中值。

语法

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

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

在上述语法中，我们将不同的图标作为图标和checkedIcon属性传递。

示例

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

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

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;

输出

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

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

使用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() hooks来跟踪已点击或未点击按钮的用户，并根据此来切换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);
}