本文介绍了单击表单按钮时,Ant Design 表单元素未提交的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用后端的 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">{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";名称=标题">提交</按钮></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 表单元素未提交的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!