和Form onSubmit或action属性未被触发

Question

我有一个登录表单，其中按钮单击数据应发送到后端。我使用ant设计，并在Form动作属性上传递服务url(action={url})，其中将发送数据。但是，当我单击提交按钮时，什么也没有发生。我尝试改变和表单使用html表单与和表单控制器，如表单。Item和Input组件以及提交的数据。我怀疑问题出在andaction属性中。如何使用action属性创建一个andd表单来提交数据?

const handleSubmit = (val) => {
console.log("Values : ", val);
};

<Form
name="login"
layout="vertical"
autoComplete="off"
action={url}
method="post"
onFinish={handleSubmit}
>
<Form.Item
htmlFor="username"
label="Username"
name="username"
rules={[
{
required: true,
message: `Please input your username!`,
},
]}
>
<Input/>
</Form.Item>
<Form.Item
htmlFor="password"
label="Password"
name="password"
rules={[
{
required: true,
message: `Please input your password!`,
},
]}
>
<Input.Password/>
</Form.Item>
<Button
size="large"
htmlType="submit"
name="login"
id="login-btn"
>
Login
</Button>
</Form>

Answer 1

您应该使用Fetch API或像axios(推荐)这样的HTTP客户端在handleSubmit函数中发送请求。使用axios:

的示例

const handleSubmit = (values) => {
axios.post(url,values).then((response) => {
console.log(response);
}).catch((error) => {
console.log(error);
})
};