CODEWITHSUNDEEP
reactjs
yongchang
yongchang

Reputation: 522

react function component Form Component onSubmit Handler Not Working

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

Upvotes: 0

Views: 226

Answers (2)

Efe Celik
Efe Celik

Reputation: 546

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>
  );
}

Upvotes: 1

Owais Ahmad
Owais Ahmad

Reputation: 112

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

<Form onFinish={hello}>

Upvotes: 0

Related Questions