Javascript 我想添加一个加载屏幕，直到在react中提交表单后加载另一个组件

我正在努力学习如何反应。我正在提交一份表格。我使用了

handleSubmit

。我想添加一个加载屏幕，直到提交表单后加载其他组件。我怎么能做到

我有一个

Detail

组件和一个

Summary

组件。在提交时，它将进入任何一个组件

在App.js中

handleSubmit(evt) {

   let prevState = this.initialState
    this.setState( prevState=> ({
        disabled: !prevState,
        }),
    );

    if (this.state.checkIds && this.state.checkIds.length > 0) {
        redirect = redirect.concat(`checkids=${this.state.checkIds}&`)
    }

    return this.props.history.push(redirect)

}
onClick = () => {
  this.setState(this.initialState)
    this.props.history.push("/");
}

render() {
    return (
        <div>
        <form  onSubmit={this.handleSubmit}>
            <label>
                Project ID:
                <input type="text" value={this.state.projectId} name="projectId" onChange={this.handleChange}/>
            </label>
            <button type="button"  class ="button" value="detail"  onClick={this.handleSubmit}>Detail</button>
            <button type="button" class ="button" value="summary" onClick={this.handleSubmit}>Summary</button>
            <button type="button" class ="button" value="back"  disabled={this.state.disabled} onClick={this.onClick}>Back</button>
        </form>
        </div>
    )
}

handleSubmit（evt）{
让prevState=this.initialState
this.setState（prevState=>({
已禁用：！prevState，
}),
);
if（this.state.checkIds&&this.state.checkIds.length>0）{
redirect=redirect.concat（`checkids=${this.state.checkids}&`）
}
返回此.props.history.push（重定向）
}
onClick=（）=>{
this.setState（this.initialState）
this.props.history.push（“/”）；
}
render（）{
返回(
项目ID:
细节
总结
返回
)
}

---

我想要一个加载页面，将出现在点击按钮。它将一直存在，直到其中一个组件被加载

从示例代码中看不清楚，但是您的状态应该有一个

isLoading

和

hasload

参数。处理提交时，设置state

isLoading:true

。加载完成后，设置state

isLoading:false

和

hasload:true

。然后在渲染中，可以执行以下操作：

render() {
  const {isLoading, hasLoaded} = this.state;
  return isLoading ? <Loader /> : hasLoaded ? <LoadedComponent /> : <FormWithButtonComponent />
}

handleSubmit() {
    this.setState( {loading: true} );

    ...
    // after you completed your goal, add this
    this.setState( {loading: false} );
}

let button =<button type="button" class ="button" value="detail" onClick={this.handleSubmit}>Detail</button>

 if (this.state.loading) {
     button = <Spinner />
}

render（）{
const{isLoading，hasload}=this.state；
返回isLoading？：已加载？：
}

首先，在您的

状态上创建一个名为
的属性load:false
。然后创建一个名为
Spinner
的组件，其中包括两个文件，
Spinner.js
和
Spinner.css

对于css，请访问并选择所需的任何微调器。将
CSS
代码复制到
Spinner.CSS
中。确保使用
.Loader
更改
.Loader
类名

然后在
Spinner.js
组件中，输入以下代码：

import React from 'react';

import classes from './Spinner.css';

const spinner = () => (
    <div className={classes.Loader}>Loading...</div>
);

export default spinner;

似乎有一个错误，
让您的组件名
和状态检查在哪里定义？
让您的组件名
可以定义为用户想要的任何内容。它可以是他引用
onClick
功能的按钮。但它需要声明为变量才能使用
if
语句。然后在
if
语句中，他将检查状态。我编辑了我的答案以便更好地理解。