向导形式-反应最终形式

Question

I created wizard from based on react-final-form. Only the first page is corrected display. When clicking next, the next page display empty. Why is this happening?

This is my form

const MyForm = () => (
  <FinalForm
    initialValues={{ employed: true }}
    render={({ handleSubmit }) => (
      <Form onSubmit={handleSubmit}>
        <FinalField
          name="firstName"
          component="input"
          type="text"
          placeholder="First Name"
        />
        <FinalField
          name="lastName"
          component="input"
          type="text"
          placeholder="Last Name"
        />
      </Form>
    )}
  />
);

This is component that is displayed multi form:

const App = () => (
  <Styles>
    <h1>🏁 React Final Form Example</h1>
    <h2>Wizard Form</h2>
    <a href="https://github.com/erikras/react-final-form#-react-final-form">
      Read Docs
    </a>
    <p>
      Notice the mixture of field-level and record-level (or <em>page-level</em>{" "}
      in this case) validation.
    </p>
    <Wizard initialValues={{ employed: true }} onSubmit={onSubmit}>
      <Wizard.Page>
        <MyForm />
      </Wizard.Page>
      <Wizard.Page>
        <p>Strona 2</p>
      </Wizard.Page>
      <Wizard.Page>
        <MyForm />
      </Wizard.Page>
      <Wizard.Page>
        <MyForm />
      </Wizard.Page>
    </Wizard>
  </Styles>
);

And this is wizard component:

export default class Wizard extends React.Component {
  static propTypes = {
    onSubmit: PropTypes.func.isRequired
  };
  static Page = ({ children }) => children;

  constructor(props) {
    super(props);
    this.state = {
      page: 0,
      values: props.initialValues || {}
    };
  }
  next = values =>
    this.setState(state => ({
      page: Math.min(state.page + 1, this.props.children.length - 1),
      values
    }));

  previous = () =>
    this.setState(state => ({
      page: Math.max(state.page - 1, 0)
    }));



  validate = values => {
    const activePage = React.Children.toArray(this.props.children)[
      this.state.page
    ];
    return activePage.props.validate ? activePage.props.validate(values) : {};
  };

  handleSubmit = values => {
    const { children, onSubmit } = this.props;
    const { page } = this.state;
    const isLastPage = page === React.Children.count(children) - 1;
    if (isLastPage) {
      return onSubmit(values);
    } else {
      this.next(values);
    }
  };

  render() {
    const { children } = this.props;
    const { page, values } = this.state;
    const activePage = React.Children.toArray(children)[page];
    const isLastPage = page === React.Children.count(children) - 1;
    return (
      <Form
        initialValues={values}
        validate={this.validate}
        onSubmit={this.handleSubmit}
      >
        {({ handleSubmit, submitting, values }) => (
          <form onSubmit={handleSubmit}>
            {activePage}
            <div className="buttons">
              {page > 0 && (
                <button type="button" onClick={this.previous}>
                  « Previous
                </button>
              )}
              {!isLastPage && <button type="submit">Next »</button>}
              {isLastPage && (
                <button type="submit" disabled={submitting}>
                  Submit
                </button>
              )}
            </div>
          </form>
        )}
      </Form>
    );
  }
}

The full example can be found here: https://codesandbox.io/s/8l5qn573o2 thank you in advance :)

Answer 1

You are including your MyForm component, which is a Form, inside your wizard component Form, which causes you a warning.

<form> cannot appear as a descendant of <form>

Try removing the nested forms by modifing the MyForm component this way:

import React from "react";
import { Form as FinalForm, Field as FinalField } from "react-final-form";

const MyForm = () => (
  <div>
    <FinalField
      name="firstName"
      component="input"
      type="text"
      placeholder="First Name"
    />
    <FinalField
      name="lastName"
      component="input"
      type="text"
      placeholder="Last Name"
    />
  </div>
);

export default MyForm;