React.js 提交按鈕在控制台日志上不起作用？

Question

當我點擊react js上的提交按鈕時，提交不起作用，我不知道為什么？ 我在后端使用 ant.design Ui 組件使用 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;

這部分代碼包含在布局頁面中，所有文本都出現了，但是當我在 chrome 瀏覽器中檢查控制台時，沒有向控制台發送任何數據。 請幫助我，謝謝

Answer 1

試試這個

  <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. 將 onSubmit 更改為 onFinish。
2. onFinish cb 的values object。 那也需要更新。

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

或者

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