按钮：一个完美的循环，一个自由的轮回

前端

2023-11-29 06:20:50

Button 组件：打造一个响应式且实用的交互元素

什么是 Button 组件？

在现代网页设计中，按钮组件是必不可少的交互元素。它们为用户提供了一种与网站或应用程序进行交互的方式，可以触发各种操作，从提交表单到加载内容。优秀的按钮组件不仅可以增强用户体验，还可以为你的页面增添美感和专业感。

如何构建一个 Button 组件

构建一个功能齐全、美观大方的 Button 组件并不复杂。以下是一个分步指南，将帮助你创建自己的组件：

1. 基本实现

首先，你需要创建一个基本组件，实现其点击事件和简单的样式。这个组件只需要以下几行代码：

import React, { useState } from "react";

const Button = ({ children, onClick }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    onClick && onClick(e);
  };

  return (
    <button
      className={isHovered ? "button--hovered" : "button"}
      onClick={handleClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {children}
    </button>
  );
};

export default Button;

2. 添加更多样式

现在，你的按钮组件已经有了基本功能，但它看起来可能还不够美观。添加更多样式可以使你的按钮脱颖而出。以下是一些额外的样式：

const Button = ({ children, onClick }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    onClick && onClick(e);
  };

  return (
    <button
      className={
        isHovered ? "button--hovered" : "button button--default"
      }
      onClick={handleClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {children}
    </button>
  );
};

3. 添加禁用状态

有时，你需要禁用按钮组件以防止用户点击它。以下是如何实现禁用状态：

const Button = ({ children, onClick, disabled }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    if (!disabled) {
      onClick && onClick(e);
    }
  };

  return (
    <button
      className={
        isHovered && !disabled
          ? "button--hovered"
          : disabled
          ? "button button--disabled"
          : "button button--default"
      }
      onClick={handleClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {children}
    </button>
  );
};

4. 添加加载状态

在某些情况下，你可能需要在按钮组件上显示加载状态以指示正在进行的操作。以下是如何实现加载状态：

const Button = ({ children, onClick, loading }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    if (!disabled) {
      onClick && onClick(e);
    }
  };

  return (
    <button
      className={
        isHovered && !disabled && !loading
          ? "button--hovered"
          : loading
          ? "button button--loading"
          : disabled
          ? "button button--disabled"
          : "button button--default"
      }
      onClick={handleClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {loading ? "Loading..." : children}
    </button>
  );
};

5. 添加尺寸和形状

按钮组件可以有不同的尺寸和形状以满足不同的设计需求。以下是如何实现尺寸和形状：

const Button = ({
  children,
  onClick,
  disabled,
  loading,
  size,
  shape,
}) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    if (!disabled) {
      onClick && onClick(e);
    }
  };

  return (
    <button
      className={
        isHovered && !disabled && !loading
          ? `button--hovered button--${size} button--${shape}`
          : loading
          ? `button button--loading button--${size} button--${shape}`
          : disabled
          ? `button button--disabled button--${size} button--${shape}`
          : `button button--default button--${size} button--${shape}`
      }
      onClick={handleClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {loading ? "Loading..." : children}
    </button>
  );
};

使用 Button 组件

现在你已经有了自己的 Button 组件，你可以像这样在你的代码中使用它：

import Button from "./Button";

const MyComponent = () => {
  return (
    <div>
      <Button onClick={() => console.log("Clicked!")}>
        Click Me
      </Button>
    </div>
  );
};