react function component Form Component onSubmit Handler Not Working

Question

This is my react function component

import "./styles.css";
import { Form, Button } from "antd";

export default function App() {
  const hello = () => {
    console.log("enter");
  };

  return (
    <div className="App">
      <Form onSubmit={hello}>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Apply
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

I am trying to invoke the function when user press the apply button, but it nothing is showing. Where am I doing it wrong??

This is my codesandbox

I think there is no submit prop in antd form, you can use onFinish prop — Nacho
– Nacho, Commented Oct 14, 2021 at 7:14
Before posting any question, please go through documentation. — Rahul
– Rahul, Commented Oct 14, 2021 at 7:16

Efe Celik · Accepted Answer · 2021-10-14 07:16:36Z

1

The issue is onSubmit according to antd document it should be onFinish

Here is the code:

import "./styles.css";
import { Form, Button } from "antd";
export default function App() {
  const hello = () => {
    console.log("enter");
  };

  return (
    <div className="App">
      <Form onFinish={hello}>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Apply
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

answered Oct 14, 2021 at 7:16

Efe Celik

5465 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Owais Ahmad · Accepted Answer · 2021-10-14 07:13:51Z

0

According to the antd documentation, Forms onFinish is the identifier for submitting callback rather than onSubmit. So you can use:

<Form onFinish={hello}>

answered Oct 14, 2021 at 7:13

Owais Ahmad

1121 silver badge6 bronze badges

Collectives™ on Stack Overflow

react function component Form Component onSubmit Handler Not Working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related