javascript - 与 Antd Form react onFinish 不检索数据

Question

我是 React 的初学者，我正在学习如何使用 Django 后端创建 React 应用程序的教程。在视频中，他使用了 Ant Design Components v3(这是制作视频时的最新版本)。现在我使用的是最新的 v4，他们将表单 onSubmit 更改为 onFinish。在评论中进行了一些研究之后，人们发布了有关更新以及如何使其工作但没有运气的信息。问题是我试图从表单输入(标题和内容)中获取数据并且它显示未定义。任何想法?这是组件:

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() 的输出是:未定义，未定义，{}

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>