Javascript 如何在ReactJS上的onClick事件按钮上添加seprate加载程序文件？

我是新来的，但仍然学到了很多。我创建了另一个js文件（Loading.js），我希望它成为onClick事件的加载程序，特别是在（newclient按钮）和（manageaccount按钮）上

从“React”导入React；
从“./Loading”导入加载；
导入“../Styles.scss”；
情态动词
偶像
}来自“语义ui反应”；
函数InvestNow（）{
返回(
{
window.location.href='/'；
//*在此处添加Loading.js
}}
color=“黄色”
流体
偶像
labelPosition=“left”>
新客户
);
}
立即导出默认值

这是我从react Loader spinner创建的加载器

My Loading.js

import React, { Component } from 'react';
import Loader from 'react-loader-spinner';
import '../Styles.scss';
import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';

class Loading extends React.Component {
  render() {
    return (
      <Loader
        type="Bars"
        color="#FFD400"
        height={450}
        width={100}
        timeout={5000} //3 secs
        className="Loadingstyle"
      />
    );
  }
}

export default Loading;

从“React”导入React，{Component}；
从“react Loader spinner”导入装载机；
导入“../Styles.scss”；
导入'react-loader-spinner/dist/loader/css/react-spinner-loader.css'；
类加载扩展了React.Component{
render（）{
返回(
);
}
}
导出默认加载；

实际上，您需要的是保持一个状态，以切换加载指示器。对于从react导入的“useState”。然后使用下面的代码作为参考

<Button
onClick={() => {
    setLoading(true);
    setTimeout(function(){ 
       setLoading(false);
       window.location.href='/';
    }, 5000);
}}
>
    {isLoading ? <Loading /> : null }
    <Icon name="plus" />
    New Client
</Button>

---

如果我理解正确，您希望在调用

onClick

后显示

load.js

组件，而不是按钮。如果是这样，您实际上需要向组件添加状态管理。差不多

函数InvestNow（）{
//变量，以控制是否应渲染加载按钮
常量[isLoading，setIsLoading]=React.useState（false）
返回(
{
//不加载时将渲染按钮，否则将加载组件
！正在加载(
{
//将加载设置为true
setIsLoading（真）
//做其他事情
}}
/* ... */
/>
) : (
)
}
)
}

---

对于

React.useState

reference:

等，单击要显示加载动画吗？这可以通过在

InvestNow

组件中创建一个状态来完成，以跟踪加载是否应显示

const[loading，setLoading]=React.useState（false）

然后，您可以在单击中将加载设置为true

setLoading（true）

；要显示您的加载程序，您可以使用

{！！loading&&}

yes right@JacobSmitdo有条件地显示它。您使用路由器吗？您是否使用redux mobx或任何其他州管理库？感谢您抽出时间回答。我想我的问题有误导性，对此我很抱歉。这就是顺序：单击按钮后，我的加载程序将出现（我设置为5秒），然后将重定向到另一个js文件。多谢各位

<Button
onClick={() => {
    setLoading(true);
    setTimeout(function(){ 
       setLoading(false);
       window.location.href='/';
    }, 5000);
}}
>
    {isLoading ? <Loading /> : null }
    <Icon name="plus" />
    New Client
</Button>

const [isLoading, setLoading] = useState(false);