ReactJs 如何创建一个响应式的喜欢按钮

在ReactJS中创建一个响应式的 “喜欢 “按钮是提高你的网络应用程序的互动性的一个绝妙方法。这篇博文将讨论在ReactJS中创建一个响应式的喜欢按钮所需的步骤，以及一些示例代码，以帮助你开始。

让我们先来看看React组件的基本结构。一个React组件是一个生成React元素的JavaScript函数。一个React元素是一个直接的JavaScript对象，它描述了一个DOM节点。一个按钮元素，用户可以点击它来表达他们对某个材料的认可，这就是一个 “喜欢 “按钮的组件。

第1步：设置React项目

要开始工作，你将需要建立一个React项目。如果你还没有，你可以使用create-react-app命令来建立一个新项目。

npx create-react-app my-app
cd my-app
npm start

这将在 “my-app “目录下创建一个新项目，并启动一个开发服务器，以便你可以在线预览你的修改。

第2步：创建 “喜欢 “按钮组件

在建立了一个简单的React项目后，我们现在可以为我们的 “喜欢 “按钮构建一个新的组件。在项目的src目录下，创建一个名为 LikeButton.js 的新文件

import React, { useState } from 'react';
function LikeButton() {
   const [likes, setLikes] = useState(0);
   return (
      <button onClick={() => setLikes(likes + 1)}>
         {likes} Likes
      </button>
   );
}
export default LikeButton;

我们正在将React和useState钩子从react包中导入这段代码。我们可以使用useState钩子向我们的组件添加状态–在本例中，是喜欢的数量。当按钮被点击时，初始状态被设置为0，setLikes函数被用来更新状态并以修改后的喜欢数量重新渲染组件。

第3步：将喜欢按钮添加到应用程序中

现在我们需要在我们的应用程序中加入我们的喜欢按钮组件。为了达到这个目的，我们将把LikeButton组件添加到JSX中，并将其导入 App.js文件中。

import React from 'react';
import LikeButton from './LikeButton';
function App() {
   return (
      <div>
         <LikeButton />
      </div>
   );
}
export default App;

第4步：设计 “喜欢 “按钮的样式

最后，我们可以将我们的 “喜欢 “按钮样式化，使其类似于一个真正的按钮。要做到这一点，只需在LikeButton.js代码中导入一个CSS文件并添加。

// LikeButton.js
import './App.css';

在App.css中定义CSS，如下所示。

//App.css
.like-button-container {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 20px;
}
.like-button {
   border: none; 
   outline: none;
   background-color: transparent;
   font-size: 18px;
   font-weight: bold;
   color: #333;
   cursor: pointer;
   transition: all 0.2s ease-in-out;
   padding: 10px 20px;
   border: 2px solid #333;
}
.like-button:hover {
   color: #fff;
   background-color: #333;
}
.like-button.liked {
   color: #ff69b4;
   border-color: #ff69b4;
}
/* For mobile screens */
@media (max-width: 768px) {
   .like-button-container {
      flex-direction: column;
   }
   .like-button {
      font-size: 16px;
      margin-bottom: 10px;
      padding: 8px 16px;
      border-width: 1px;
   }
}

第5步：为喜欢的状态添加一个条件样式

可以给我们的按钮添加一个条件样式，以显示它是否被喜欢。为了跟踪按钮是否被喜欢，我们可以给我们的组件添加一个新的状态变量。一旦按钮被喜欢了，我们可以使用这个状态变量给它一个不同的类。

// LikeButton.js
import React, { useState } from "react";
import "./App.css";
function LikeButton() {
   const [likes, setLikes] = useState(0);
   const [liked, setLiked] = useState(false);
   return (
      <button
         className={`like-button ${liked ? 'liked' : ''}`}
         onClick={() => {
            setLikes(likes + 1);
            setLiked(true);
         }}
      >
         {likes} Likes
      </button>
   );
}
export default LikeButton;

而在我们的CSS文件中，我们可以为喜欢的状态添加一个新的类。

第6步：使 “喜欢 “按钮具有响应性

使用CSS媒体查询，我们可以根据屏幕的大小，对 “喜欢 “按钮进行不同的设计。例如，如果屏幕宽度小于500px，我们可以改变按钮的文字大小。

在较小的显示器上，我们可以使用flexbox来使按钮充满其容器的整个宽度。

/* App.css */
.like-button-container {
   display: flex;
   justify-content: center;
}

/* LikeButton.js */
return (
   <div className="like-button-container">
      <button
         className={`like-button ${liked ? 'liked' : ''}`}
         onClick={() => {
            setLikes(likes + 1);
            setLiked(true);
         }}
      >
         {likes} Likes
      </button>
   </div>
);