单击表单按钮时，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 应用程序的超级新手，因此不胜感激.

从'react'导入React；import { Form, Input, Button } from 'antd';class CustomForm 扩展 React.Component {handleFormSubmit = (event, requestType, articleID) =>{//event.preventDefault();const title = event.target.elements.title.value;const content = event.target.elements.content.value;控制台日志(标题，内容)；}使成为() {返回 (<div><表格onSubmit={event =>this.handleFormSubmit(事件，this.props.requestType,this.props.articleID)}><Form.Item label="Title"><输入名称=标题"placeholder="输入标题";/></Form.Item><Form.Item label=内容"><输入名称=内容"placeholder="在此处输入公告内容";/></Form.Item><表单.项目><按钮类型=主要"htmlType="submit">{this.props.btnText}</Form.Item></表格>

);}};导出默认自定义表单；

解决方案

问题是onSubmit 根据antd文档应该是onFinish在这里，您还需要在 中将 name 和 label 一起传递:

代码如下:

const Demo = () =>{const onFinish = (values) =>{控制台日志(成功:"，值)；//这里可以直接调用props};const onFinishFailed = (errorInfo) =>{控制台日志(失败:"，错误信息)；};返回 (<表格{...布局}名称=基本"初始值={{记住:真的}}onFinish={onFinish}onFinishFailed={onFinishFailed}><Form.Item label="Title";名称=标题"><输入名称=标题"placeholder="输入标题";/></Form.Item><Form.Item label="Content";名称=内容"><输入名称=内容"placeholder="在此处输入公告内容";/></Form.Item><表单.项目><按钮类型=主要"htmlType="提交">提交</按钮></Form.Item></表格>);};

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

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;

解决方案

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>:

Here is the code:

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>
  );
};

Here is the demo: https://codesandbox.io/s/competent-violet-opwlh?file=/index.js

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