时间戳

首页 > 解决方案 > React TypeScript 中的向导表单 react-final-form

javascript - React TypeScript 中的向导表单 react-final-form

问题描述

我想在 React.js 中使用带有 TypeScript 的 react-final-form 创建一个 3 步表单。我从codesandbox中获取了模式，但我遇到了 const static Page 的问题。我不知道如何将它重写为 TypeScript，老实说我不知道​​它是如何工作的......

到目前为止，我得到了这个：

向导.tsx

  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;

  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;

注册.tsx

    import React from "react";
import Wizard from "./wizard";

import styles from "./register.module.scss";

const Register: React.FC = () => {
  const onSubmit = () => {
    console.log("onSubmit");
  };

  return (
    <Wizard onSubmit={onSubmit}>
      <Wizard.Page>Page 1</Wizard.Page>
      <Wizard.Page>Page 2</Wizard.Page>
      <Wizard.Page>Page 3</Wizard.Page>
    </Wizard>
  );
};

export default Register;

静态错误： const static: any Variable 'static' implicitly has an 'any' type.ts(7005)

在页面上： const Page: (children: any) => any ',' expected.ts(1005)

标签： javascriptreactjstypescriptreact-final-form

解决方案

只是Page作为一个单独的拉出来FC。没有充分的理由<Wizard.Page>代替<WizardPage>.

您可以Wizard通过成为interface WizardWithPage extends React.FC等来维持它的状态。但这是浪费精力，只需拉出Page`Wizard.

推荐阅读