无法在reactjs中正确使用模糊效果

w46czmvw 于 2023-01-02 发布在 React

关注(0)|答案(2)|浏览(467)

我正在尝试创建一个登录页面。

import React, { useState, createRef } from "react";
import { Spinner } from "react-bootstrap";
import { ClipLoader } from "react-spinners";
import "./style.css";

function Login() {
  const [loading, setLoading] = useState(false);

  //var [toggle, setToggle] = useState(0.3);

  const [disabled, setDisabled] = useState(false);

  

  const makeBlur1 = () => {
    setLoading(true);

    setDisabled(true);
  };

  return (
    <div class= {loading ? 'blur' : 'container'}>
      <div>
        <input type="text" placeholder="username" />
        <br></br>
        <br></br>
        <br></br>
        <input type="text" placeholder="password" />
        <br></br>
        <br></br>
        <br></br>
        <button onClick={makeBlur1} disabled={disabled}>
          login
        </button>
        <br></br>
        <br></br>
        <br></br>
      </div>
      {loading ? (
        <div
          id="loadingDiv"
          class="box stack-top"
          style={{ background: "white", border: "2px solid black" }}
        >
          <ClipLoader /> &nbsp; &nbsp;
          <span
            id="loadingDivText"
            style={{ fontWeight: "bold", fontSize: "30px" }}
          >
            Loading...
          </span>
        </div>
      ) : null}
    </div>
  );
}

export default Login;

//end

CSS

body{
    background: black;
}

.container{
    width: 200px;
    height: 200px;
    position: relative;
    margin-top: 200px;
    margin-left: 500px;
    

  justify-content: center;
  align-items: center;
}
.box{
    width: 100%;
    height: 100%;            
    position: absolute;
    
    left: 0;
    opacity: 0.8;  /* for demo purpose  */

    display: flex;
  justify-content: center;
  align-items: center;

}
.stack-top{
    z-index: 9;
    margin: -20px -20px -20px -80px; /* for demo purpose  */
    width: 400px;
    height: 150px;
    opacity: 1;
}

.blur{
    width: 200px;
    height: 200px;
    position: relative;
    margin-top: 200px;
    margin-left: 500px;
    

  justify-content: center;
  align-items: center;
    filter: blur(2px);
  }

我想要的是，当我点击登录按钮的背景变得模糊，并显示我的loadingDiv.but on button click the whole screen gets blurred.有人能帮忙吗？
我已经尝试使用不透明度切换以及，但我不断得到错误unable to setProperty of null，而我尝试和使用

document.getElementById("loadingDiv")[0].style.opacity = 1

-------------编辑
login.js

import React, { useState, createRef } from "react";
import { Spinner } from "react-bootstrap";
import { ClipLoader } from "react-spinners";
import "./style.css";

function Login() {
  const [loading, setLoading] = useState(false);

  //var [toggle, setToggle] = useState(0.3);

  const [disabled, setDisabled] = useState(false);

  const makeBlur1 = () => {
    setLoading(true);

    setDisabled(true);

  };

  return (
    <div>

{loading ? (
          <div
            class="box stack-top"
            style={{ background: "white", border: "2px solid black" }}
          >
            <ClipLoader /> &nbsp; &nbsp;
            <span
              style={{ fontWeight: "bold", fontSize: "30px" }}
            >
              Loading...
            </span>
          </div>
        ) : null}

      <div class={loading ? "blur" : "container"}>
        <div>
          <input type="text" placeholder="username" />
          <br></br>
          <br></br>
          <br></br>
          <input type="text" placeholder="password" />
          <br></br>
          <br></br>
          <br></br>
          <button onClick={makeBlur1} disabled={disabled}>
            login
          </button>
          <br></br>
          <br></br>
          <br></br>
        </div>
      </div>

    </div>
  );
}

export default Login;

//end

style.css

body{
    background: black;
}

.container{
    width: 200px;
    height: 200px;
    position: relative;
    margin-top: 200px;
    margin-left: 500px;
    

  justify-content: center;
  align-items: center;
}
.box{
    width: 100%;
    height: 100%;            
    position: absolute;
    margin-left: 100px;
    justify-self: center;
    opacity: 0.8;  /* for demo purpose  */

    display: flex;
  justify-content: center;
  align-items: center;

}
.stack-top{
    z-index: 9;
    margin: -20px -20px -20px -80px; /* for demo purpose  */
    width: 400px;
    height: 150px;
    opacity: 1;
}

.blur{
    width: 200px;
    height: 200px;
    position: relative;
    margin-top: 200px;
    margin-left: 500px;
    

  justify-content: center;
  align-items: center;
    filter: blur(2px);
  }

现在模糊效果很好，但是div不是居中对齐的。它是左对齐的。我该怎么做？

reactjs

来源：https://stackoverflow.com/questions/73500909/unable-to-use-blur-effect-correctly-in-reactjs

2条答案

按热度按时间

bn31dyow1#

我已经解决了这个问题。
App.js

import logo from "./logo.svg";
import "./App.css";
import Login from "./login/login";
import React, { useState } from "react";
import Loader from "./loader/loader";

function App() {
  const [loading, setLoading] = useState(false);


  const [disabled, setDisabled] = useState(false);

  const makeBlur1 = () => {
    setLoading(true);

    setDisabled(true);
  };

  return (
    <div className="App">
      {!loading ? (
        <Login loading={loading} disabled={disabled} makeBlur1={makeBlur1} />
      ) : (
        <>
          <div style={{marginLeft: "480px"}}><Loader /></div>
          <Login loading={loading} disabled={disabled} makeBlur1={makeBlur1} />
        </>
      )}
    </div>
  );
}

export default App;

import React from "react";
import Loader from "../loader/loader";
import "./style.css";

function Login(props) {
  
  return (
    <div>

{/* {loading ? (
          <Loader />
        ) : null} */}

      <div class={props.loading ? "blur" : "container"}>
        <div>
          <input type="text" placeholder="username" />
          <br></br>
          <br></br>
          <br></br>
          <input type="text" placeholder="password" />
          <br></br>
          <br></br>
          <br></br>
          <button onClick={props.makeBlur1} disabled={props.disabled}>
            login
          </button>
          <br></br>
          <br></br>
          <br></br>
        </div>
      </div>

    </div>
  );
}

export default Login;

//end

style.css

//for login

body{
    background: black;
}

.container{
    width: 200px;
    height: 200px;
    position: relative;
    margin-top: 200px;
    margin-left: 500px;
    

  justify-content: center;
  align-items: center;
}
.box{
    width: 100%;
    height: 100%;            
    position: absolute;
    margin-left: 100px;
    justify-self: center;
    opacity: 0.8;  /* for demo purpose  */

    display: flex;
  justify-content: center;
  align-items: center;

}
.stack-top{
    z-index: 9;
    margin: -20px -20px -20px -80px; /* for demo purpose  */
    width: 400px;
    height: 150px;
    opacity: 1;
}

.blur{
    width: 200px;
    height: 200px;
    position: relative;
    margin-top: 200px;
    margin-left: 500px;
    

  justify-content: center;
  align-items: center;
    filter: blur(2px);
  }

loader.js

import React from "react";
import { ClipLoader } from "react-spinners";
import "./style.css";

function Loader() {
  return (
    <div
      class="box stack-top"
      style={{ background: "white", border: "2px solid black" }}
    >
      <ClipLoader /> &nbsp; &nbsp;
      <span style={{ fontWeight: "bold", fontSize: "30px" }}>Loading...</span>
    </div>
  );
}

export default Loader;

//end

style.css

//for loader

body{
    background: black;
}

.box{
    width: 100%;
    height: 100%;            
    position: absolute;
    margin-left: 100px;
    justify-self: center;
    opacity: 0.8;  /* for demo purpose  */

    display: flex;
  justify-content: center;
  align-items: center;

}
.stack-top{
    z-index: 9;
    margin: -20px -20px -20px -80px; /* for demo purpose  */
    width: 400px;
    height: 150px;
    opacity: 1;
}

现在，当你点击登录按钮，它将模糊背景，并显示加载程序div。

赞(0）回复(0）举报 2023-01-02

xzv2uavs2#

如果你不想重新发明轮子，或者你不需要一些非常可定制的东西，你可以使用这个包：
react-spinner-overlay
您需要添加到App.js中的唯一一段代码是

const [loading, setLoading] = useState(false);
    
      const dispatch = useDispatch();
    
      const logOut = async (evt) => {
        setLoading(true);
        evt.preventDefault();
        dispatch(logout(user.token))
          .then(() => {
            setLoading(false);
          })
          .catch(() => {
            setLoading(false);
          });
      };

  return (
 <RingSpinnerOverlay loading={loading}  overlayColor="rgba(0,153,255,0.2)" color="#0275d8" borderWidth = "4"
  />

      <div className="App">
...
</div>

赞(0）回复(0）举报 2023-01-02

我来回答

无法在reactjs中正确使用模糊效果

2条答案

相关问题

热门标签

最新问答