未触发的ANTD形式或动作属性

Question

我有一个登录表单，该表格单击数据应将数据发送到后端。我使用ANT设计和表单操作属性，我正在传递服务URL （action = {url}）将发送数据的位置。但是，当我单击“提交”按钮时，什么也不会发生。我尝试将ANTD表单与ANTD表单控制器（例如Form.Sorm.Item和Input组件）更改为使用HTML表单，并提交数据。我怀疑问题在ANTD Action 属性中。如何使用操作属性制作ANTD表单以提交数据？

           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

您应该在handlesubmit函数内发送请求，并使用 fetch api 或http客户端，例如 axios （推荐）。
Axios的一个例子：

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