按钮加载 react-hooks-nextjs答案

【问题标题】：Button Loading react-hooks-nextjs按钮加载 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；

【问题讨论】：

标签： html css react-hooks next.js

【解决方案1】：

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

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

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

SetTimeout 在定时器到时运行函数

【讨论】：