React项目中点击按钮添加旋转加载动画的问题求助

看起来你遇到的问题主要是缺少加载动画的渲染逻辑以及层级定位处理不当，导致设置状态后页面崩溃。咱们一步步来修复这个问题：

问题分析 #

1. 你当前的状态只有fadingOut，没有专门控制加载动画显示的状态，直接添加loader元素可能会导致渲染逻辑混乱
2. 加载动画需要在模糊的页面上方显示，必须设置正确的定位和层级（z-index），否则会被模糊层覆盖或者布局错乱

解决方案 #

1. 更新组件状态与事件处理

首先在组件状态中添加isLoading，用来控制加载动画的显示；同时在fadeOut方法中启动加载状态，还可以模拟异步操作（比如接口请求）来演示加载完成后的状态重置：

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

class App extends React.Component {
  state = { 
    fadingOut: false,
    isLoading: false // 新增控制加载动画的状态
  }

  fadeOut = () => {
    this.setState({ fadingOut: true, isLoading: true });
    
    // 模拟异步操作（比如API请求），加载完成后重置状态
    setTimeout(() => {
      this.setState({ fadingOut: false, isLoading: false });
    }, 3000);
  }

  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" alt="logo"/>
          </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" alt="left triangle"/>
            <img className="rightTriangle" src="./rightSideTriangle.png" alt="right triangle"/>
          </div>
        </div>

        {/* 加载动画容器，根据isLoading状态显示 */}
        {this.state.isLoading && (
          <div className="loader-overlay">
            <div className="loader"></div>
          </div>
        )}
      </>
    );
  }
}

export default App;

2. 完善SCSS样式

给加载动画添加定位和层级，确保它在页面中央且覆盖在模糊层上方：

/* 主页面容器添加相对定位，作为加载层的参考 */
.App {
  position: relative;
  min-height: 100vh;
}

/* 加载动画的遮罩层，覆盖整个页面 */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999; /* 确保在模糊层上方 */
  background-color: rgba(255, 255, 255, 0.5); /* 可选：添加半透明背景增强视觉效果 */
}

.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); }
}

关键改动说明 #

• 新增isLoading状态专门控制加载动画的显示/隐藏，避免状态混乱导致的崩溃
• 使用fixed定位的loader-overlay确保加载动画覆盖整个页面，且通过z-index保证在模糊层上方
• 添加min-height: 100vh给主容器，确保页面高度足够，避免布局错乱
• 模拟异步操作的setTimeout可以替换成实际的API请求逻辑，完成后重置状态即可

内容的提问来源于stack exchange，提问作者godspeed