首页 > 解决方案 > 如何为反应应用程序提供间隔

问题描述

我正在使用带有 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;

使用它,我可以从用户那里获得输入并显示成功通知。window.location.reload(true) 但是当我尝试在我的代码中使用此代码时,我想在 5 秒后重新加载我的页面,因为handleFormSubmit它不允许发生通知。

标签: reactjsformsantd

解决方案


您可以使用setTimeout(() => window.location.reload(true), 5000);此代码


推荐阅读