javascript - 单击按钮时如何添加加载动画？

Question

对于我的网站，单击按钮时，屏幕会模糊。我现在正尝试在按下按钮时在该模糊之上添加一个旋转圆圈的加载动画，但是，我遇到了很多问题。当我尝试让按钮点击也有“isActive”，然后在 isActive 时创建加载器类 div，整个网站崩溃了。

js文件代码:

import React from "react";
import "./App.scss";

class App extends React.Component {

    state = { fadingOut: false }
    fadeOut = () => this.setState({fadingOut: true});


    render() {
        return (
            <div className="App" style={this.state.fadingOut ? {filter: 
            'blur(0.35vw)'} : undefined }
            > 

                <div className="top-bar">

                <div className="title">
                    .datapoems
                </div>

                <img className="logo" src="./logo.png"/>

                </div>

                <div className="container">
                    <div className="sloganLineOne">Poem Theme</div>
                    <div className="sloganLineTwo">Detector</div>
                    <textarea className="inputField" placeholder="Please Enter 
                     Your Poem Here..."></textarea>
                    <button className="button" onClick= 
                     {this.fadeOut}>Enter</button>
                    <img className="leftTriangle" 
                     src="./leftSideTriangle.png"/>
                    <img className="rightTriangle" 
                     src="./rightSideTriangle.png"/>
                </div>
            </div>
        );
    }
}

export default App;

scss 加载器代码:

 .loader {
                border: 16px solid #f3f3f3;
                border-radius: 50%;
                border-top: 16px solid blue;
                border-bottom: 16px solid blue;
                width: 120px;
                height: 120px;
                -webkit-animation: spin 2s linear infinite;
                animation: spin 2s linear infinite;
              }

              @-webkit-keyframes spin {
                0% { -webkit-transform: rotate(0deg); }
                100% { -webkit-transform: rotate(360deg); }
              }

              @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
              }

Answer 1

我对您的代码进行了一些修改以实现您想要的结果(基于我从您的问题中了解到的内容)。

class App extends Component {
  state = { fadingOut: false };
  fadeOut = () => this.setState({ fadingOut: true });

  render() {
    const contentStyle = this.state.fadingOut
      ? { filter: "blur(0.35vw)" }
      : undefined;
    const loadingIndicator = this.state.fadingOut ? (
      <div style={loaderStyle}>-- Loading icon --</div>
    ) : null;

    return (
      <div className="App" style={{ position: "relative" }}>
        <div style={contentStyle}>
          <div className="top-bar">
            <div className="title">.datapoems</div>
            <img className="logo" src="./logo.png" />
          </div>
          <div className="container">
            <div className="sloganLineOne">Poem Theme</div>
            <div className="sloganLineTwo">Detector</div>
            <textarea
              className="inputField"
              placeholder="Please Enter Your Poem Here..."
            />
            <button className="button" onClick={this.fadeOut}>
              Enter
            </button>
            <img className="leftTriangle" src="./leftSideTriangle.png" />
            <img className="rightTriangle" src="./rightSideTriangle.png" />
          </div>
        </div>
        {loadingIndicator}
      </div>
    );
  }
}

const loaderStyle = {
  position: "absolute", // or position: "fixed"
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

https://codesandbox.io/s/react-example-353dg