【发布时间】:2020-08-19 12:53:27
【问题描述】:
我正在使用带有 antd 框架的反应。我已经创建了一个表单并处理了提交:
我的forms.js:
import React from 'react';
import { Form, Input, Button, notification } from 'antd';
import axios from 'axios';
class CustomForm extends React.Component {
handleFormSubmit = (event, requestType, articleId) => {
const title = event.target.elements.title.value;
const content = event.target.elements.content.value;
notification.open({
message: 'Success',
description:
'Your Response is submitted',
onClick: () => {
console.log('Notification Clicked!');
},
onCancel: () => {
}
});
// eslint-disable-next-line
switch (requestType) {
case 'post':
return axios.post('http://localhost:8000/api/', {
title:title,
content:content
}
)
.then (res => console.log(res))
.catch(err => console.error(err))
case 'put':
return axios.put(`http://localhost:8000/api/${articleId}/`, {
title:title,
content:content
})
.then (res => console.log(res))
.catch(err => console.error(err))
}
}
render(){
return (
<div>
<Form onSubmitCapture={(event) => this.handleFormSubmit(event, this.props.requestType, this.props.articleId)} >
<Form.Item label="Title">
<Input name='title' placeholder="Input some title" />
</Form.Item>
<Form.Item label="Content">
<Input name='content' placeholder="Input some content" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType='submit' >{this.props.btntext}</Button>
</Form.Item>
</Form>
</div>
)
}
};
export default CustomForm;
使用它,我可以从用户那里获得输入并显示成功通知。但是当我尝试在我的handleFormSubmit 中使用此代码window.location.reload(true) 时收到通知时,我想在 5 秒后重新加载我的页面,它不允许发生通知。
【问题讨论】:
-
你想在哪里重新加载页面?
-
@PrãtéékThápá 我想在显示通知5秒后提交表单时重新加载页面
-
setTimeout(() => window.location.reload(true), 5000);试试这个。 -
@PrãtéékThápá 谢谢,效果很好。
-
@PrãtéékThápá 我有一个建议给你