React. js кнопка отправки не работала в журнале консоли?

Question

когда я нажимаю кнопку отправки в ответе js, отправка не работает, я не знаю почему? Я использую компонент пользовательского интерфейса ant.design на бэкэнде. Используя 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

1. Измените onSubmit на onFini sh.
2. onFini sh cb будет иметь values в качестве объекта. Это также необходимо обновить.

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

или

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

Answer 2

Попробуйте это

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