Question

我正在后端使用Django rest框架，在前端使用React来构建Web应用程序。我还使用Ant Design来帮助样式设计。我一直在关注有关YouTube的教程，但是在尝试提交表单以创建新文章时，我目前遇到一些问题。我已经解决了一些麻烦，并且我相信问题出在表单的onSubmit函数上。我尝试将onClick添加到按钮上，以确保单击被识别并且按预期工作，这就是为什么我认为问题与onSubmit有关。现在，我要做的就是将表单元素打印到控制台。我是开发Web应用程序的超级新手，因此将不胜感激。

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


class CustomForm extends React.Component {

    handleFormSubmit = (event, requestType, articleID) => {
        //event.preventDefault();
        const title = event.target.elements.title.value;
        const content = event.target.elements.content.value;

        console.log(title, content);
    }

    render() {
        return (
            <div>
                <Form
                    onSubmit={event =>
                        this.handleFormSubmit(
                            event,
                            this.props.requestType,
                            this.props.articleID
                        )
                    }
                >
                    <Form.Item label="Title">
                        <Input name="title" placeholder="Enter a Title" />
                    </Form.Item>
                    <Form.Item label="Content">
                        <Input name="content" placeholder="Enter the content of the announcement here" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">{this.props.btnText}</Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
};

export default CustomForm;

Answer 1

根据onSubmit文档的问题是antd，这里应该是onFinish，并且您还需要在{{1中将name和label一起传递}}：

代码如下：

<Form.Item>

以下是演示：https://codesandbox.io/s/competent-violet-opwlh?file=/index.js

单击“表单”按钮时，Ant Design表单元素未提交

1 个答案: