React.js Форма - Как включить все значения на конечной странице?

Question

Итак, я создал Wizard Form, используя React-Final-Form, который я использую на своей странице регистрации. Я пытаюсь выяснить, как я могу отобразить все пользовательские данные на последней странице, чтобы пользователь мог дважды проверить / подтвердить свои входные данные перед отправкой. Любая помощь будет принята с благодарностью!

(П.С. - Я пытался исследовать это перед публикацией, но все, что мне удалось найти, - это сохранить пользовательские вводы в Redux и получить к ним доступ оттуда, чего я бы хотел избежать, если это вообще возможно.)

Вот пример ссылки, которая показывает, что я хочу сделать - пожалуйста, не стесняйтесь раскошелиться и поиграть с ним, если вы пытаетесь найти решение! https://codesandbox.io/s/0332k02x0v

Вот код, сокращенный, чтобы включать только соответствующие биты:

Моя страница Wizard.js:

<code>import React, { Component } from "react";
import PropTypes from "prop-types";
import { Form } from "react-final-form";

class Wizard extends 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>

            {/* <pre>{JSON.stringify(values, 0, 2)}

* /} )} ); } } Мастер экспорта по умолчанию;

Моя страница index.js:

import React, { Component } from "react";
import { Field } from "react-final-form";
import formatString from "format-string-by-pattern";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Wizard from "./Wizard";
import Styles from "./Styles";
import { addUser } from "../../../actions/authActions";

class ReactFinalForm2 extends Component {
  state = {};
  render() {
    const onSubmit = async values => {
      this.props.addUser(values);
      // API query here
    };

    const Error = ({ name }) => (
      // Error handing here
    );

    return (
      <Styles>
        <div>
          <Wizard initialValues={{}} onSubmit={onSubmit}>
            <Wizard.Page
              validate={values => {
                // Page validation here
              }}
            >
              // Page inputs here
            </Wizard.Page>
            <Wizard.Page
              validate={values => {
                // Page validation here
              }}
            >
              // Page inputs here
            </Wizard.Page>
            <Wizard.Page
              validate={values => {
                // Page validation here
              }}
            >
              // Page inputs here
            </Wizard.Page>
            <Wizard.Page>
              {/* *** THIS IS WHERE I WOULD LIKE TO DISPLAY ALL PREVIOUS VALUES (SO THE USER CAN CONFIRM / DOUBLE-CHECK THEIR INPUTS BEFORE SUBMITTING) *** */}
            </Wizard.Page>
          </Wizard>
        </div>
      </Styles>
    );
  }
}

ReactFinalForm2.propTypes = {
  addUser: PropTypes.func.isRequired
};

export default connect(
  null,
  { addUser }
)(ReactFinalForm2);

Answer 1

Я добавил состояние в родительский компонент.Изменение этого состояния при каждой отправке от ребенка.У меня есть JSON stringify состояние в родительском компоненте.Как вы сказали, нет необходимости использовать Redux, это обходной путь, с которым я пришел.Тем не менее ваш код имеет потенциал для улучшений.Пожалуйста, проверьте эту рабочую песочницу:

[https://codesandbox.io/s/zrvloq4o6x]

Wizard.js change

  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);
    }
    // Change added
    this.props.onStateChange(values);
  };

Index.js

import React from "react";
import { render } from "react-dom";
import Styles from "./Styles";
import { Field } from "react-final-form";
import Wizard from "./Wizard";

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const onSubmit = async values => {
  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

const Error = ({ name }) => (
  <Field
    name={name}
    subscribe={{ touched: true, error: true }}
    render={({ meta: { touched, error } }) =>
      touched && error ? <span>{error}</span> : null
    }
  />
);

const required = value => (value ? undefined : "Required");
let data = {};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.onStateChange = this.onStateChange.bind(this);
  }

  onStateChange = values => {
    this.setState({ data: values });
    console.log(values);
  };
  render() {
    return (
      <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={{}}
          onStateChange={this.onStateChange}
          onSubmit={onSubmit}
        >
          <Wizard.Page>
            <div>
              <label>First Name</label>
              <Field
                name="firstName"
                component="input"
                type="text"
                placeholder="First Name"
                validate={required}
              />
              <Error name="firstName" />
            </div>
            <div>
              <label>Last Name</label>
              <Field
                name="lastName"
                component="input"
                type="text"
                placeholder="Last Name"
                validate={required}
              />
              <Error name="lastName" />
            </div>
          </Wizard.Page>
          <Wizard.Page
            validate={values => {
              const errors = {};
              if (!values.notes) {
                errors.notes = "Required";
              }
              return errors;
            }}
          >
            <div>
              <label>Best Stooge?</label>
              <div>
                <label>
                  <Field
                    name="stooge"
                    component="input"
                    type="radio"
                    value="larry"
                  />{" "}
                  Larry
                </label>
                <label>
                  <Field
                    name="stooge"
                    component="input"
                    type="radio"
                    value="moe"
                  />{" "}
                  Moe
                </label>
                <label>
                  <Field
                    name="stooge"
                    component="input"
                    type="radio"
                    value="curly"
                  />{" "}
                  Curly
                </label>
              </div>
            </div>
            <div>
              <label>Notes</label>
              <Field name="notes" component="textarea" placeholder="Notes" />
              <Error name="notes" />
            </div>
          </Wizard.Page>
          <Wizard.Page>
            <div>
              <p>
                <b>Display all previous values here for user verification </b>
                <br />
                <i>{JSON.stringify(this.state.data, 0, 2)}</i>
              </p>
            </div>
          </Wizard.Page>
        </Wizard>
      </Styles>
    );
  }
}

render(<App />, document.getElementById("root"));