react function component Form Component onSubmit Handler Not Working-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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

<Form onFinish={hello}>