向导形式 - 反应最终形式

Question

我根据反应最终形式创建了向导。仅更正第一页显示。单击"下一步"时，下一页显示为空。为什么会这样？

这是我的表格

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>
    )}
  />
);

这是以多种形式显示的组件：

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>
);

这是向导组件：

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>
    );
  }
}

完整的示例可以在这里找到：https://codesandbox.io/s/8l5qn573o2提前谢谢你:)

Answer 1

您将 MyForm 组件（即窗体）包含在向导组件窗体中，这会导致警告。

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

尝试通过以这种方式修改 MyForm 组件来删除嵌套表单：

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;