Реагируйте с Antd Form onFini sh не получать данные

Question

Я новичок в React, и я следовал учебному пособию о том, как создать приложение React с Django backend. В видео он использует Ant Design Components v3 (это было самое последнее, когда было сделано видео). Сейчас я использую последнюю версию v4, и они изменили форму onSubmit на onini sh. После некоторого исследования в комментариях люди опубликовали информацию об обновлении и о том, как заставить его работать, но не повезло. Проблема в том, что я пытаюсь получить данные из входных данных формы (заголовок и содержимое), и они показывают неопределенные. Любые идеи ? Вот компонент:

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

const FormItem = Form.Item;

class CustomForm extends Component {
    handleFormSubmit = (values) => {
        const title = values.title;
        const content = values.content;
        console.log(title, content, values);
    };

    render() {
        return (
            <div>
                <Form onFinish={(values) => this.handleFormSubmit(values)}>
                    <FormItem label="Title">
                        <Input name="title" placeholder="Article Content" />
                    </FormItem>
                    <FormItem label="Content">
                        <Input
                            name="content"
                            placeholder="Enter Article Content"
                        />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" htmlType="submit">
                            Submit
                        </Button>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

export default CustomForm;

И вывод console.log (): undefined, undefined, {}

Answer 1

Если в этом случае Form.Item или FormItem, то в вашем случае должен быть реквизит name, который подойдет, поэтому значения не сохраняются для этого ключа. например,

изменить это

<FormItem label="Title">
   <Input name="title" placeholder="Article Content" />
</FormItem>

На

<FormItem label="Title" name="title">
    <Input placeholder="Article Content" />
</FormItem>