I have a login form where on button click data should be sent to the backend. I use ant design and on Form action attribute I am passing the service url (action={url}) where the data will be sent. However, when I click the submit button, nothing happens. I tried changing the antd form to use html form with antd form controllers, like Form.Item and Input components and the data get submitted. I suspect that the problem is within antd action attribute. How can I make an antD Form to submit the data using the action attribute?

           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>

CodePudding user response：

You should send the request inside your handleSubmit function using Fetch API or an HTTP client like axios (recommended). An example with axios:

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