React.js submit button didn't work on Console Log?

Question

when I click on the submit button on react js, Submit doesn't work, I don't know why? I'm using ant.design Ui component in on backend Using Django python.

import React from "react";
import { Form, Input, Button } from "antd";

const FormItem = Form.Item;

class ExtrashiftForm extends React.Component {
  handleFormSubmit = (event) => {
    event.preventDefault();
    const title = event.target.elements.title.value;
    const manager = event.target.elements.manager.value;
    const gender = event.target.elements.gender.value;
    const Lable = event.target.elements.Lable.value;
    const datetime = event.target.elements.datetime.value;
    console.log(title, manager,gender,Lable,datetime);
  };
  render() {
    return (
      <div>
        <Form onSubmit={this.handleFormSubmit}>
          <FormItem name="title" label="Title">
            <Input placeholder="title here" />
          </FormItem>
          <FormItem name="manager" label="Manager">
            <Input placeholder="select Manager Name .. " />
          </FormItem>
          <FormItem name="gender" label="Gender">
            <Input placeholder="select Gender Type .. " />
          </FormItem>
          <FormItem name="Lable" label="Lable">
            <Input />
          </FormItem>
          <FormItem name="datetime" label="DateTime">
            <Input />
          </FormItem>
          <FormItem>
            <Button type="primary" htmlType="submit">
              Ok
            </Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}
export default ExtrashiftForm;

this part of code included inside the layout page, and all text coming but when I check Console in chrome browser, didn't send any data to console. please help me, thank you

Answer 1

Try this one

  <Form onFinish={(values) => this.handleFormSubmit(values)}>
         <FormItem label="Title">
            <Input placeholder="title here" name="title" />
          </FormItem>
   </Form>



const handleFormSubmit = (values) => {
        const title = values.title;
        console.log(title);
    };

Answer 2

1. Change onSubmit to onFinish.
2. onFinish cb will have values as object. That also need to update.

<Form onFinish={(values) => console.log(values)}>

or

<Form onFinish={({title, manager,gender,Lable,datetime}) => console.log({title, manager,gender,Lable,datetime})}>