使用打字稿形式的反应最终形式步进器（向导形式）未显示

Question

我正在将 react-final-form 向导形式（react stepper）与 typescript 集成，这是我到目前为止所做的。

Wizard 是主要的向导页面，其中写入了 Final form Form 字段

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>

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

Answer 1

我发现问题所在，

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

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

使用打字稿形式的反应最终形式步进器（向导形式）未显示

react-final-form stepper (wizard form) using typescript form is not getting displayed

javascript

reactjs

react-final-form

react-typescript