reactjs - React Loading Overlay 上的实现点击

Question

我正在尝试在单击按钮时在按钮上实现 react-loading-overlay 。这是为了帮助显示后端正在进行身份验证并为用户提供正在发生的事情的反馈。我不清楚按钮如何在单击时激活加载微调器，而不是在空闲时加载微调器。主要问题是我不明白单击按钮时如何定义“活动”。

  <Button onClick={handleSign} color="primary">
           <LoadingOverlay
              
              active={What do I use?}
                        spinner
                        text='Loading your content...'
                    >
                    Authenticate
                </LoadingOverlay>
   </Button>

https://www.npmjs.com/package/react-loading-overlay

标签： reactjs

Answer 1

像这样试试。按下按钮后，您需要设置active道具。truesign in

const [loading, setLoading] = useState(false)

const handleSignIn = (event) => {
  setLoading(true)
}

...

render() {
  return (
    <LoadingOverlay
     active={loading}
     ...
    >
  )
}

也许您应该设置loading为false一旦登录成功或失败。