使用 typescript 表单的反应最终表单步进器（向导表单）未显示

Question

I am integrating react-final-form wizard form (react stepper) with typescript this is what i have done till now.

Wizard is the main wizard page were the Final form Form field is written

 import React, { useState } from "react"; import { Form } from "react-final-form"; type Wizard = { onSubmit: (values: Values) => void; }; type Values = { name: String; surname: String; email: String; password: String; city: String; birthDay: Number; birthMonth: Number; birthYear: Number; }; // 3-steps form const Wizard: React.FC<Wizard> = ({ onSubmit, children }) => { const [page, setPage] = useState(0); const [values, setValues] = useState<Values | undefined>(undefined); const activePage = React.Children.toArray(children)[page]; const isLastPage = page === React.Children.count(children) - 1; console.log("CONNECTED"); // const static Page = (children) => children; // next page const next = (values: Values) => { setPage(Math.min(page + 1, React.Children.count(children))); setValues(values); }; // previous page const previous = () => { setPage(Math.max(page - 1, 0)); }; const handleSubmit = (values: Values) => { const isLastPage = page === React.Children.count(children) - 1; if (isLastPage) { return onSubmit(values); } else { next(values); } }; return ( <Form onSubmit={handleSubmit}> {({ handleSubmit, submitting, values }) => { <form onSubmit={handleSubmit}> {activePage} <div className="buttons"> {page > 0 && ( <button type="button" onClick={previous}> « Powrót </button> )} {;isLastPage && <button type="submit">Dalej »</button>} {isLastPage && ( <button type="submit" disabled={submitting}> Zakończ </button> )} </div> </form>; }} </Form> ); }; export default Wizard;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

WizardPage component, as per example given is React final form -wizard example I changed it into typescript while doing that static Page = ({ children }) => children was throwing error so I moved it to different component.

 import React from "react"; type props = { children: React.ReactNode; }; export const WizardPage: React.FC<props> = ({ children }) => { console.log(children); return <div>{children}</div>; };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

BusinessRegister is the main page were the component is getting rendered.

 import React from "react"; import Wizard from "./Wizard"; import { WizardPage } from "./WizardPage"; import { Field } from "react-final-form"; const BusinessRegister: React.FC = () => { const onSubmit = () => { console.log("onSubmit"); }; return ( <div> <h1>Step form</h1> <Wizard onSubmit={onSubmit}> <WizardPage>Page 1</WizardPage> <WizardPage>Page 2</WizardPage> <WizardPage>Page 3</WizardPage> </Wizard> </div> ); }; export default BusinessRegister;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I am not able to see any form fields right now..though when I integrate the step form without using typescript then all fields are getting displayed.

Answer 1

I found what was wrong,

{({ handleSubmit, submitting, values }) => {
    <form onSubmit={handleSubmit}>
      {activePage}
      <div className="buttons">
        {page > 0 && (
          <button type="button" onClick={previous}>
            « Powrót
          </button>
        )}
        {!isLastPage && <button type="submit">Dalej »</button>}
        {isLastPage && (
          <button type="submit" disabled={submitting}>
            Zakończ
          </button>
        )}
      </div>
    </form>;
  }}

In here I haven't added the return for form that was the reason the form was not getting displayed. Thank you