当在React中点击按钮作为组件时，如何在按钮内部添加活动加载器？

Question

我想要显示一个活动加载器，就像当用户单击带有ButtonLoader.js和ButtonLoader.css文件的Login按钮时按钮中的微调器。下面是我放在那里的Login.js的一些代码。我认为如果我在ButtoneLoader.js中加上ButtonLoader.css中的样式，就会出现加载器，但我不知道从哪里开始。

这是登录页面

​

​

Login.js

<div className="auth-form-inputLine auth-form-submitBtn-container" id="auah-login-SubmitBtnContainer">
     <button onClick={this.handleFormSubmit} className="auth-form-submitBtn">
           {this.state.submitting ? <ButtonLoader /> : <h2 className="text">Login</h2>}
     </button>
</div>

我从How to show a loading screen while logging in in React复制了以下代码，但它不起作用。该按钮仅显示空白，没有登录文本。

我应该通过访问按钮className类auth-form-submitBtn来改变按钮样式吗？

ButtonLoader.js

import React from "react";
import "./styles/ButtonLoader.css";

const ButtonLoader = () => {
  return (
    <div className="spinnerDiv">
        <svg className="spinner" viewBox="0 0 50 50">
            <circle
                className="path"
                cx="25"
                cy="25"
                r="20"
                fill="none"
                strokeWidth="5"
            ></circle>
        </svg>
    </div>
  );
};

export default ButtonLoader;

ButtonLoader.css

.spinnerDiv {
    background-color: white;
    height: 100vh;
    opacity: 0.6;
}

Answer 1

你的网页上有背景图片/颜色吗？

我想到的第一件事可能是添加

z-index: 100 

添加到.spinnerDiv {} css

Answer 2

尝试使用react-spinkit instate

Login.js
import Spinner from "react-spinkit";
<div className="auth-form-inputLine auth-form-submitBtn-container" id="auah-login-SubmitBtnContainer">
     <button onClick={this.handleFormSubmit} className="auth-form-submitBtn">
           {this.state.submitting ? <Spinner name="circle" /> : <h2 className="text">Login</h2>}
     </button>
</div>

选择你想要的微调器：http://kyleamathews.github.io/react-spinkit/

并确保在handleFormSubmit函数中将提交状态设置为默认值为false并更改为true。