解决antd Form表单提交status为canceled

最新推荐文章于 2024-11-16 21:06:36 发布

皮卡丘UP

最新推荐文章于 2024-11-16 21:06:36 发布

阅读量1.2k

点赞数 1

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_44371012/article/details/104492465

版权

笔记专栏收录该内容

42 篇文章

订阅专栏

表单提交status为canceled的代码

 <Form onSubmit={this.handleSubmit} className="login-form">
                    <Form.Item>
                        {getFieldDecorator('username', {
                            rules: [{ required: true, message: '请输入账号!' }],
                        })(
                            <Input
                                placeholder="请输入账号"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入密码!' }],
                        })(
                            <Input
                                type="password"
                                placeholder="请输入密码"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{background:'#99CC33',width:'100%'}}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>

解决方法：修改表单的默认提交事件，改为button的点击事件

修改之后的代码：

<Form className="login-form">
                    <Form.Item>
                        {getFieldDecorator('username', {
                            rules: [{ required: true, message: '请输入账号!' }],
                        })(
                            <Input
                                placeholder="请输入账号"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入密码!' }],
                        })(
                            <Input
                                type="password"
                                placeholder="请输入密码"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" onClick={this.handleSubmit} style={{background:'#99CC33',width:'100%'}}>
                            登录
                        </Button>
                    </Form.Item>