Question

嗨，我还是React的新手，所以我将样式化的组件用于css组件，并按下了以下按钮：

const SummonButton = styled.button`
    height: 50px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    font-size: 1.5em;

    :before {
        content: '';
        background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
        position: absolute;
        top: -2px;
        left:-2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: 10px;
    }

    :active {
        color: #000
    }

    :active:after {
        background: transparent;
    }

    :hover:before {
        opacity: 1;
    }

    :after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #111;
        left: 0;
        top: 0;
        border-radius: 10px;
    }

    @keyframes glowing {
        0% { background-position: 0 0; }
        50% { background-position: 400% 0; }
        100% { background-position: 0 0; }
    }

但是我希望此SummonButton在按下十次后停止运行，这就是为什么我要编写以下行：

 <SummonButton onClick={summonAble < 10 ? SummonAction : {backgroundColor: "red"}}>Summon</SummonButton>

summonAble是每次调用SummonAction时计数为+1的状态。现在，在达到10次点击之后，它会停止添加，因此保持为10，但是现在如何在十次点击之后将按钮的背景颜色更改为红色？

Answer 1

您必须将点击次数存储在某个地方。

const [clicks, setClicks] = React.useState(0);

然后，您必须在SummonButton上添加一个道具，以确定条件是否满足：

<SummonButton onClick={...} isRed={clicks > 9} />

const SummonButton = styled.button`
   background: ${({ isRed }) => isRed ? 'red' : 'black'};
   ...
`;

注意：请记住在绑定到setClicks的每个函数调用中调用onClick函数。

如何使用样式化的组件onClick更改css属性？

1 个答案: