如何解决AntD React Form提交不包括所有字段
我有一个使用antd React库构建的多步骤表单。我根据所处的阶段有条件地渲染字段,但是所有字段都在同一Form
下。
当我记录传递给values
处理程序的onFinish
时,values
不包括表单第一步中的字段。 values["name"]
不存在,但是如果我检查form.getFieldValue("name")
,则期望的值会出现在form
上。
import React,{ Fragment } from 'react';
import { Form,Input,DatePicker,Button,Card,Checkbox,InputNumber } from 'antd';
... boilerplate
const [ form ] = Form.useForm();
const onFinish = values => {
// includes "location" but not "name"
console.log(values);
}
let formContent;
switch (stage) {
case 1:
formContent = (
<Fragment>
<Form.Item name="name" label="Name">
<Input />
</Form.Item>
</Fragment>
)
break;
case 2:
formContent = (
<Fragment>
<Form.Item name="Location" label="Location">
<InputNumber />
</Form.Item>
<Button
className="next-button"
type="primary"
htmlType="submit"
>
Create
</Button>
</Form.Item>
</Fragment>
)
break;
default:
formContent = null;
}
return (
<div className="CreateTournamentForm">
<Card
title={title}
>
<Form
name="create-form"
labelCol={{ span: 10 }}
wrapperCol={{ span: 40 }}
layout="horizontal"
size="large"
form={form}
onFinish={onFinish}
initialValues={defaultValues}
>
{ formContent }
</Form>
</Card>
</div>
)
解决方法
您没有显示声明stage
值背后的逻辑。但是根据您的描述,第2阶段会覆盖第一个表单,分配一个新表单,如下所示:
<Fragment>
<Form.Item name="Location" label="Location">
<InputNumber />
</Form.Item>
<Button className="next-button" type="primary" htmlType="submit">
Create
</Button>
</Fragment>;
这将删除旧值(名称)。
如果您的表单包含多个阶段,则我将为每个阶段创建一个表单并将聚合保存到状态。然后,通过累积用户输入来获取所需的任何内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。