reactjs - 单击表单按钮时，Ant Design 表单元素未提交

Question

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

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在这里，您也需要通过 name连同 label在 <Form.Item> :
这是代码:

const Demo = () => {
  const onFinish = (values) => {
    console.log("Success:", values);
    //Can directly call props here
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item label="Title" name="title">
        <Input name="title" placeholder="Enter a Title" />
      </Form.Item>
      <Form.Item label="Content" name="content">
        <Input
          name="content"
          placeholder="Enter the content of the announcement here"
        />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

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