未显示使用打字稿形式的 react-final-form stepper向导形式

如何解决未显示使用打字稿形式的 react-final-form stepper向导形式

我正在将 react-final-form 向导表单（react stepper）与 typescript 集成，这是我迄今为止所做的。

向导是主要向导页面，其中写入了最终表单表单字段

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 组件，根据给出的例子是 React final form -wizard example 我把它改成打字稿，同时 static Page = ({ children }) => children 抛出错误，所以我把它移到了不同​​的组件。

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 是组件正在呈现的主页面。

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>

我现在看不到任何表单字段..虽然当我在不使用打字稿的情况下集成步骤表单时，所有字段都会显示出来。

解决方法

我发现哪里出了问题

{({ 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>;
  }}

在这里我没有添加表单返回，这是表单未显示的原因。 谢谢