Question

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

componentOne：

import React from 'react'

function Loader（）{

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>
    </>
)

}

导出默认加载程序；

componentTwo：

import React, {useState} from 'react';

从'../components/loader'导入Loader

function 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；

Answer 1

我认为您的工作量倒退了。我相信该功能应类似于`

function loadData(){
    setLoading ({loading: true})

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

SetTimeout在计时器计时后运行功能

按钮加载react-hooks-nextjs

1 个答案: