ReactJS 如何创建Instagram Like按钮

最重要的是，你已经使用过Instagram，并且看过每个帖子下面的Like按钮。关于Instagram的 “赞 “按钮，有两点需要注意：一是它的形状是我们需要创建的心形，二是当我们对某人的帖子 “赞 “的时候，它将被填上红色。

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

使用Material UI库

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

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

语法

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

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

在上面的语法中，我们将不同的图标作为道具传递给了图标和checkedIcon道具。

例子

在下面的例子中，我们从Material UI库中导入了两个不同的组件和两个图标。我们在FormControlLabel组件中使用了复选框组件作为控制道具的值。

另外，在复选框组件中，我们将两个图标作为一个道具传递。我们使用了Material UI中的FaviouriteBorderIcon作为图标道具的值，以便在按钮被取消点击时显示出轮廓清晰的心。此外，我们还使用了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 Like按钮？

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

使用CSS来创建心形图标，并使用反应钩子来管理其颜色。

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

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

语法

用户可以按照下面的语法，用React钩子来管理填充和勾勒的心形图标。

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

在上面的语法中，当一个被点击的变量变为真时，它就会显示带有 “被点击的心 “类名称的心形图标，它是被填充的。否则，它就会显示一个带有’心’类名称的心形图标，它被勾画出来。

例子

在下面的例子中，我们使用useState()钩子来跟踪点击或取消点击按钮的用户，并据此来切换点击变量的值。

在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 {
   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);
}