如何在ReactJS上的onClick事件按钮上添加seprate Loader文件

Question

我是React JS的新手，仍在学习很多东西。我创建了另一个js文件(Loading.js(，我希望它成为我的onClick事件的加载程序，特别是在(NewClient按钮(&amp；(管理帐户按钮(

import React from 'react';
import Loading from './Loading';
import '../Styles.scss';
Modal,
Icon,
} from 'semantic-ui-react';
function InvestNow() {
return (
<div>
<Button
onClick={() => {
window.location.href = '/';
//* ADD Loading.js here
}}
color="yellow"
fluid
icon
labelPosition="left">
<Icon name="plus" />
New Client
</Button>
</div>
);
}
export default InvestNow

这是我从反应装载机旋转创建的装载机

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;

Answer 1

实际上，您想要的是维护一个状态来切换加载指示器。对于该进口"；useState"；从反应。然后使用以下代码作为参考。

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

您还需要保持状态来处理切换加载指示器。"内部"；InvestNow"；函数编写此代码。

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

Answer 2

如果我理解正确，您希望在调用onClick后显示您的Loading.js组件，而不是按钮。如果是这样，您实际上需要向组件添加一个状态管理。类似的东西

function InvestNow() {
// Variable to control whether you should render loading or button
const [isLoading, setIsLoading] = React.useState(false)
return (
<div>
{
// Will render Button when not loading, and Loading component otherwise
!isLoading ? (
<Button
onClick={() => {
// Sets loading to true
setIsLoading(true)
// Do other things
}}
/* ... */
/>
) : (
<Loading
/* ... */
/>
)
}
</div>
)
}

对于React.useState参考：https://reactjs.org/docs/hooks-reference.html#usestate