Форма мастера в React TypeScript react-final-form - PullRequest
Новая
       2

Форма мастера в React TypeScript react-final-form

0 голосов
/ 09 июля 2020

Я хотел бы создать трехэтапную форму с помощью response-final-form с TypeScript в React. js. Я взял шаблон из codeandbox , но у меня проблема с const stati c Page. Я не знаю, как его переписать на TypeScript, и, честно говоря, я не знаю, как это работает ...

Пока что я получил это:

Wizard.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;

Register.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;

Ошибки на stati c: const static: any Variable 'static' implicitly has an 'any' type.ts(7005)

на странице: const Page: (children: any) => any ',' expected.ts(1005)

1 Ответ

1 голос
/ 09 июля 2020

Просто вытяните Page как отдельный FC. Нет веских причин, чтобы это было <Wizard.Page> вместо <WizardPage>.

Вы могли бы сохранить то, как оно есть, если Wizard будет interface WizardWithPage extends React.FC et c et c. Но это пустая трата усилий, просто вытащите Page за пределы `Wizard.

...