Javascript 单击submit后隐藏表单组件

我目前正在开发我的第一个fullstack单页应用程序（只是一个简单的待办事项列表web应用程序。我正在使用react。我有一个组件添加任务表单，每当用户单击“添加任务”按钮时都会呈现该表单。在用户单击“提交”后，我的表单工作得非常好，但在提交后，我无法找到使表单消失的方法。我有一个“成功组件”来呈现消息“任务成功添加到数据库”，它也正确呈现，但就在“添加任务表单”旁边。任务成功添加到数据库后（单击“提交”后），我应该在哪里查看以使muy“添加任务表单”隐藏？请提供任何指导

这是我的添加任务-表单的代码：

 export class AddTaskForm extends Component {
       constructor() {
          super();
           this.state = {
               name: '',
               notes: '',
               timeSpent: '',
               done:null
           };
       }

       handleChange = e => {
           this.setState({ [e.target.name]: e.target.value });
       };

       handleSubmit = e => {
           e.preventDefault();
           const newTask = this.state;
           if (!newTask.name || isNaN(newTask.timeSpent)) {
               this.setState({ error: true })
           } else {
               this.props.add({ ...newTask, projectId: this.props.projectId 
   });
               this.setState({ name: '', notes: '', timeSpent: '', error: 
   false, done: true})
           }
       };

    render() {
        return (
            <div>
                <h1>Add a Task</h1>
                <div className="form-fields">
                    <ValidatorForm onSubmit={this.handleSubmit}>
                        <FormControl>
                            <InputLabel htmlFor="name-simple">Task Name</InputLabel>
                            <Input
                                id="name"
                                type="text"
                                name="name"
                                value={this.state.name}
                                onChange={this.handleChange}
                            />
                        </FormControl>
                        {this.state.error ? (
                            <FormHelperText error id="name-error-text">This Field is required</FormHelperText>
                        ) : null}
                    </ValidatorForm>
                    <FormControl>
                        <InputLabel htmlFor="notes">Task Notes</InputLabel>
                        <Input
                            id="notes"
                            type="text"
                            name="notes"
                            value={this.state.notes}
                            onChange={this.handleChange}
                        />
                    </FormControl>
                    <ValidatorForm onSubmit={this.handleSubmit}>
                    <FormControl>
                        <InputLabel htmlFor="name-simple">Time Spent</InputLabel>
                        <Input
                            id="name-simple"
                            type="text"
                            name="timeSpent"
                            value={this.state.timeSpent}
                            onChange={this.handleChange}
                        />
                    </FormControl>
                        {this.state.error ? (
                            <FormHelperText error id="name-error-text">A number is required</FormHelperText>
                        ) : null}
                    </ValidatorForm>
                    <ListItem>
                        <Button
                            variant="contained"
                            color="primary"
                            onClick={this.handleSubmit}
                        >
                            Submit Task
              </Button>
                        {this.state.done && !this.state.error ? (
                            <div>
                                <Success itemName={this.state.name} sentFrom= "task" doingWhat= "added!" />
                            </div>
                        ) : null}
                    </ListItem>
                </div>
            </div>
        );
    }
}

导出类AddTaskForm扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“”，
注：''，
时间开销：“”，
完成：空
};
}
handleChange=e=>{
this.setState（{[e.target.name]：e.target.value}）；
};
handleSubmit=e=>{
e、 预防默认值（）；
const newTask=this.state；
如果（！newTask.name | | isNaN（newTask.timespunt））{
this.setState（{error:true}）
}否则{
this.props.add（{…newTask，projectId:this.props.projectId）
});
此.setState（{name:''，注释：''，时间开销：''，错误：
false，done:true}）
}
};
render（）{
返回(
添加任务
任务名称
{this.state.error(
此字段必填
)：null}
任务说明
花费的时间
{this.state.error(
需要一个号码
)：null}
提交任务
{this.state.done&！this.state.error(
)：null}
);
}
}

您可以用显示

成功组件的相同方式隐藏表单：

{!this.state.done && (
  <ValidatorForm onSubmit={this.handleSubmit}>
    {/* ... */}
  </ValidatorForm>
)}

{！this.state.done&&(
{/* ... */}
)}
！现在看起来太明显了！我想我只是想得太多了！谢谢你的帮助！我有一个类似的例子，但它似乎并没有实际发送表单。它隐藏了元素，但我看不到POST请求通过电线。