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

Hello 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;

从“道具类型”导入道具类型；
从“类名称”导入类名称；
从“antd”导入{菜单、图标、按钮、弹出框、徽章}；
从“./头”导入头；
首先从“./First”导入；
从“React”导入React，{Component}；
从“react”导入{useState}；
导入“antd/dist/antd.css”；
从“/firebase”导入firebase；
进口{
形式，
输入，
工具提示，
卡斯特，
标签，
选择，
一行
上校，
选项，输入编号，
复选框，
自动完成，
}来自‘antd’；
从“/Second”导入秒；
从“/Third”导入第三个；
从“@ant design/icons”导入{QuestionCircleOutlined}；
从“antd”导入{Steps，message}；
常量步骤=步骤。步骤；
常数步长=[
{
标题：“，
内容：
},
{
标题：“，
内容：
},
{
标题：“，
内容：
}
];
const AutoCompleteOption=AutoComplete.Option；
类帮助扩展组件{
下一个（）{
const current=this.state.current+1；
//console.log（当前）
this.setState（{current}）；
}
prev（）{
const current=this.state.current-1；
//console.log（当前）
this.setState（{current}）；
}
render（）{
const{current}=this.state；
console.log（当前）；
返回(


{steps.map（item=>）}
{步骤[this.state.current].content}
{this.state.current
下一个
)}
{this.state.current===steps.length-1&&(
message.success（“处理完成！”）}
>
多恩
)}
{this.state.current>0&&(
this.prev（）}>
以前的
)}
);
}
}
导出默认帮助；

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;

import React，{Component}来自“React”；
类首先扩展组件{
构造函数（）{
超级（）；
this.ref=firebase.firestore（）.collection（'requests'）；
此.state={
标题：“fff”，
zip:'11'，
供应：[]，
拉丁语：''，
长：“，
地址:"ff",，
说明：“”，
作者：''，
电子邮件：“”
};
}
render（）{
返回(
this.setState（{title:e.target.value}）
/>
);
}
}
首先导出默认值；

//这里应该介绍如何从前面的步骤中获取最终数据

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;

Third.js
从“道具类型”导入道具类型；
从“类名称”导入类名称；
从“antd”导入{菜单、图标、按钮、弹出框、徽章}；
从“./头”导入头；
从“React”导入React，{Component}；
从“react”导入{useState}；
导入“antd/dist/antd.css”；
从“/firebase”导入firebase；
进口{
形式，
输入，
工具提示，
卡斯特，
标签，
选择，
一行
上校，
选项，输入编号，
复选框，
自动完成，
}来自‘antd’；
从“@ant design/icons”导入{QuestionCircleOutlined}；
const AutoCompleteOption=AutoComplete.Option；
类首先扩展组件{
构造函数（）{
超级（）；
this.ref=firebase.firestore（）.collection（'requests'）；
此.state={
标题：“fff”，
zip:'11'，
供应：[]，
拉丁语：''，
长：“，
地址:"ff",，
说明：“”，
作者：''，
电子邮件：“”
};
}
handleSubmit=（e）=>{
警报（“ldld”）；
e、 预防默认值（）；
const{title，email，address，lat，author，long，zip，description，supply}=this.state；
此为参考添加({
标题
描述
作者
地址:，
齐普，
电子邮件，
供给
})。然后（（docRef）=>{
这是我的国家({
标题：“”，
说明：“”，
作者：''，
供应：''，
zip:“”，
电子邮件：''
});
this.props.history.push（“/”）
})
.catch（（错误）=>{
console.error（“添加文档时出错：”，错误）；
});
}
render（）{
返回(
this.setState（{title:e.target.value}）
/>
);
}
}
出口违约第三；

Hi，您解决问题了吗？Hi，您解决问题了吗？