使用 React 创建一个简单的 like 按钮组件

Question

解决方案JAVASCRIPT:

如何使用 React 16 创建“点赞按钮”组件。该组件应该是默认导出（使用默认导出）。

Click here image

Answer 1

就个人而言，我更喜欢使用功能组件而不是使用 class-based 组件。您的问题的一种解决方案可能是以下代码。

import React, { useState } from 'react';


const LikeButton = () => {
  const [likes, setLikes] = useState(100);
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    if (isClicked) {
      setLikes(likes - 1);
    } else {
      setLikes(likes + 1);
    }
    setIsClicked(!isClicked);
  };

  return (
    <button className={ `like-button ${isClicked && 'liked'}` } onClick={ handleClick }>
      <span className="likes-counter">{ `Like | ${likes}` }</span>
    </button>
  );
};

export default LikeButton;

使用 React 创建一个简单的 like 按钮组件

Create a simple like button component with React

javascript

counter

button

reactjs

styled-components