按钮加载 react-hooks-nextjs

Posted 2023-03-07

【中文标题】按钮加载 react-hooks-nextjs

【英文标题】：Button Loading react-hooks-nextjs

【发布时间】：2020-03-31 20:52:03

【问题描述】：

我正在做一个加载微调按钮，当我按下按钮时，加载图标会出现但不会在标记的时间消失，并继续加载。代码如下：

组件一：

import React from 'react'

函数加载器()

return(
    <>
    <div className="loaderIcon"></div>
    <style jsx>
    `
    .loaderIcon
        border: 10px solid #f3f3f3;
        border-radius: 50%;
        border-top: 10px solid #3498bd;
        width: 60px;
        height: 60px;
        animation: spin 2s linear infinite;
    
    @keyframes spin
        0%  transform: rotate(0deg);
        100%  transform rotate(360deg);
    
    `
    </style>
    </>
)

导出默认加载器；

组件二：

import React, useState from 'react';

从'../components/loader'导入加载器

函数 ButtonLoading()

const [loading, setLoading] = useState(false)

function loadData()
    setLoading (loading: false)

    setTimeout(()=>
        setLoading(loading: true);
    , 1000);


return(
    <>
    <div>
    <button className="btnLoading" onClick=loadData disabled=loading>
    loading &&(<Loader/>)
    loading && <span className="oneSpan">Loading page</span>
    !loading && <span className="twoSpan">Load page</span>
    </button>
    </div>

    <style jsx>
    `
    .btnLoading
        background-color: green;
    
    .oneSpan
        color: red;
        font-size: 20px;
    

    .twoSpan
        color: black;
        font-size: 20px;
    
    `
    </style> 
    </>
)

导出默认ButtonLoading；

【参考方案1】：

我认为你的加载是倒退的。我相信函数应该看起来像`

function loadData()
    setLoading (loading: true)

    setTimeout(()=>
        setLoading(loading: false);
    , 1000);
`

SetTimeout 在定时器到时运行函数