分享
三行代码  ›  专栏  ›  技术社区  ›  krisna

反应:样式化组件加载按钮

  •  0
  • krisna  · 技术社区  · 5 天前

    我正在为我的应用程序使用React-typescript。我正在使用的样式 Styled-components settime-out loading .... . 我还添加了禁用选项时,假api将调用按钮应禁用。这种逻辑也行不通。

    这是按钮组件

    import * as React from "react";
    import styled, { css } from "styled-components";
    
    interface IButtonProps {
      children?: React.ReactChild;
      className?: string;
      size?: "small" | "medium" | "big";
      themes?: "primary" | "secondary" | "dark" | "light";
      disabled?: boolean;
      loading?: boolean;
      style?: React.CSSProperties;
      onClick?: () => void;
      onSubmit?: () => void;
    }
    
    const Button = ({
      children,
      className,
      size,
      themes,
      disabled,
      loading,
      style,
      onClick,
      onSubmit
    }: IButtonProps) => (
        <button
          className={className}
          onClick={onClick}
          onSubmit={onSubmit}
          style={
            disabled && disabled 
              ? { opacity: 0.5, pointerEvents: `none` }
              : loading ? { ...style, pointerEvents: `none` } : //This is my disabled condition.
                style
          }
        >
          {loading ? <p>loading...</p> : children} //This is my loading condition.
        </button>
      );
    
    const sizes = {
      small: css`
        padding: 5px 20px;
        font-size: 12px;
      `,
      medium: css`
        padding: 10px 30px;
        font-size: 14px;
      `,
      big: css`
        padding: 15px 40px;
        font-size: 18px;
      `
    };
    
    const ButtonThemes = {
      primary: css`
        border: 1px solid tomato;
        background: tomato;
        color: white;
      `,
      secondary: css`
        border: 1px solid palevioletred;
        background: palevioletred;
        color: white;
      `,
      dark: css`
        border: 1px solid #273444;
        background: #273444;
        color: white;
      `,
      light: css`
        border: 1px solid #eff2f7;
        background: #f9fafc;
        color: #273444;
      `
    };
    
    const StyledButton = styled(Button)`
      ${({ size = "small" }) => sizes[size]};
      ${({ themes = "primary" }) => ButtonThemes[themes]};
      outline: none;
      border-radius: 5px;
      cursor: pointer;
    `;
    
    export default StyledButton;
    

    这是我的父组件。我使用了settimeout和import Button组件。

    const handleClick = () => { 
        setTimeout(() => {
          console.log("check it out") //It does display when the button click 
        }, 5000);
      }
    
       //This is the Button 
           <Button size="medium" themes="primary" onClick={handleClick}>click</Button>
    
    1 回复  |  直到 5 天前
        1
  •  0
  •   Trung Nguyen    5 天前

    loading useState 如果父组件是 function component ,如果使用 class component 您可以像这样在构造函数中定义一个状态 this.state = { loading: false } 在父组件中,并将其设置为 true handleClick 把州作为你的支柱 Button

    // In case function component
    const [loading, setLoading] = useState(false);
    const handleClick = () => {
        setLoading(true); 
        setTimeout(() => {
          setLoading(false); // When finish, set it to false
          console.log("check it out") //It does display when the button click 
        }, 5000);
    }
    
    //This is the Button 
    <Button 
      size="medium" 
      themes="primary" 
      onClick={handleClick} 
      loading={loading}
    >
       click
    </Button>