单击表单按钮时，Ant Design表单元素未提交 [英] Ant Design form element is not submitting when the form button is clicked

问题描述

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

I am building a web app using Django rest framework on the backend and React on the frontend. I am also using Ant Design to help with styling. I have been following a tutorial on Youtube but I am currently running into some issues when trying to submit a form to create a new article. I have done some trouble shooting and I believe the issue is with the Form's onSubmit function. I tried adding an onClick to the button to ensure that the click is being recognized and that worked as expected which is why I believe the issue is with the onSubmit. Right now, all I am trying to do is print the form elements to the console. I am super novice with developing web applications so any help would be much appreciated.

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;

推荐答案

根据 antd 文档，问题是 onSubmit ，应该为 onFinish 在这里，还需要在< Form.Item>

The issue is onSubmit according to antd document it should be onFinish here and also you need to pass name along with label in <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

这篇关于单击表单按钮时，Ant Design表单元素未提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！