AntD React Form Submit 不包括所有字段答案

【问题标题】：AntD React Form Submit not including all fieldsAntD React Form Submit 不包括所有字段
【发布时间】：2020-09-12 03:08:46
【问题描述】：

我有一个使用 antd React 库构建的多步骤表单。我根据我所处的阶段有条件地渲染字段，但所有字段都在同一个Form下。

当我记录传递给onFinish 处理程序的values 时，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>
    )

【问题讨论】：

标签： reactjs antd

【解决方案1】：

您没有展示声明 stage 值背后的逻辑。但是根据您的描述，第 2 阶段会覆盖第一个表单，分配一个新表单，如下所示：

<Fragment>
  <Form.Item name="Location" label="Location">
    <InputNumber />
  </Form.Item>
  <Button className="next-button" type="primary" htmlType="submit">
    Create
  </Button>
</Fragment>;

这将删除旧值（名称）。

如果您的表单包含多个阶段，我会为每个阶段创建一个并将聚合保存到状态。然后通过累积用户输入来获取您想要的任何内容。

【讨论】：