AntD React 表单提交不包括所有字段

Question

I have a multi-step form built with the antd React library. I conditionally render the fields based on which stage I'm in, but all fields are under the same Form .

When I log the values passed to the onFinish handler, values doesn't include the fields from the first step of my form. values["name"] doesn't exist, but if I check form.getFieldValue("name") the value I expect is present on the 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>
    )

Answer 1

You don't show the logic behind declaring the stage value. But from what you're describing, stage 2 overrides the first form, assigning a new one, which is like this:

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

This deletes the old values (name).

If your form consists in various stages, I'd create one for each stage and save the aggregates to the state. Then fetch whatever you want with the accumulation of the user inputs.