如何使用ANTD创建多步骤表单

Question

你好everonye我试图用antd步骤制作一个多步骤表单，在最后一步，我想从以前的组件中收集所有数据/状态并提交给firebase，但是我的问题是如何传递状态/表格的值到最后的提交步骤？如果可能的话，我想避免使用redux。

//显示步骤的主要组件

import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Menu,  Icon, Button, Popover, Badge } from 'antd';
import Header from './Header';
import First from './First';
import React, { Component } from 'react';
import  { useState } from 'react';
import "antd/dist/antd.css";

import firebase from './Firebase';
import {
  Form,
  Input,
  Tooltip,
  Cascader,
  Tag,
  Select,
  Row,
  Col,
  Option,InputNumber,
  Checkbox,

  AutoComplete,
} from 'antd';
import Second from "./Second";
import Third from "./Third";
import { QuestionCircleOutlined } from '@ant-design/icons';

import { Steps,  message } from "antd";
const Step = Steps.Step;

const steps = [
  {
    title: "",
    content: <First />
  },
  {
    title: "",
    content: <Second />
  },
  {
    title: "",
    content: <Third />
  }
];

const AutoCompleteOption = AutoComplete.Option;




class Help extends Component {




          next() {
             const current = this.state.current + 1;
             // console.log(current)
             this.setState({ current });
           }
           prev() {
             const current = this.state.current - 1;
             // console.log(current)
             this.setState({ current });
           }
           render() {
             const { current } = this.state;
             console.log(current);
             return (
               <div>

                 <Header isMobile={this.state.isMobile} />
                 <br/>
                 <Steps current={current}>
                   {steps.map(item => <Step key={item.title} title={item.title} />)}
                 </Steps>
                 <div className="steps-content">{steps[this.state.current].content}</div>
                 <div className="steps-action">
                   {this.state.current < steps.length - 1 && (
                     <Button type="primary" onClick={() => this.next()}>
                       Next
                     </Button>
                   )}
                   {this.state.current === steps.length - 1 && (
                     <Button
                       type="primary"
                       onClick={() => message.success("Processing complete!")}
                     >
                       Done
                     </Button>
                   )}
                   {this.state.current > 0 && (
                     <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
                       Previous
                     </Button>
                   )}
                 </div>
               </div>
             );
           }
         }







export default Help;

first.js

import React, { Component } from "react";


class First extends Component {

  constructor() {
     super();

    this.ref = firebase.firestore().collection('requests');
    this.state = {
    title: 'fff',
    zip: '11',
    supply:[],
    lat:'',
    long:'',
    address:'ff',
    description: '',
    author: '',
    email: ''
  };

   }

      render() {
        return (
          <div>
             <Form.Item label="First Name">
             <Input placeholder="input placeholder" style={{width:"25%"}}
              value={this.state.title}
              onChange={(e) => this.setState({title: e.target.value})}
             />
            </Form.Item>
          </div>
        );
      }
    }

    export default First;

//如何从之前的步骤中获取最终数据

Third.js



import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Menu,  Icon, Button, Popover, Badge } from 'antd';
import Header from './Header';
import React, { Component } from 'react';
import  { useState } from 'react';
import "antd/dist/antd.css";

import firebase from './Firebase';
import {
  Form,
  Input,
  Tooltip,
  Cascader,
  Tag,
  Select,
  Row,
  Col,
  Option,InputNumber,
  Checkbox,

  AutoComplete,
} from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';

const AutoCompleteOption = AutoComplete.Option;



class First extends Component {
  constructor() {
     super();

     this.ref = firebase.firestore().collection('requests');
      this.state = {
    title: 'fff',
    zip: '11',
    supply:[],
    lat:'',
    long:'',
    address:'ff',
    description: '',
    author: '',
    email: ''
  };
   }





        handleSubmit = (e) => {

          alert('ldld');
            e.preventDefault();

            const { title, email, address, lat ,author, long , zip ,description, supply } = this.state;

            this.ref.add({
              title,
              description,
              author,
              address,
              zip,
              email,
              supply,

            }).then((docRef) => {
              this.setState({
                title: '',
                description: '',
                author: '',
                supply:'',
                zip:'',
                emailL:''
              });
              this.props.history.push("/")
            })
            .catch((error) => {
              console.error("Error adding document: ", error);
            });
          }

  render(){




 return(

  <div>

  <Form

       layout="horizontal"

         onSubmit={this.handleSubmit}

      >

        <Form.Item label="First Name">
          <Input placeholder="input placeholder" style={{width:"25%"}}
           value={this.state.title}
        onChange={(e) => this.setState({title: e.target.value})}
             />
        </Form.Item>

);
}
}




export default Third;