Отправить данные, введенные пользователем, из одного компонента в другой в реагирующе-избыточном виде?

Question

Мне нужно просмотреть введенные пользователем входные данные для пользователя, прежде чем сохранять их в БД.

В этом компоненте я проверяю входные данные Step1.js

import React, { Component } from "react";
import { Button, Row, Col, Label } from "reactstrap";
import { Control, LocalForm, Errors } from "react-redux-form";

const required = val => val && val.length;
const maxLength = len => val => !val || val.length <= len;
const minLength = len => val => val && val.length >= len;
export default class Step1 extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    // explicit class assigning based on validation

    return (
      <div className="step step3">
        <div className="row">
          <LocalForm>
            <div className="form-group">
              <label className="col-md-12 control-label">
                <h1>Step 1: Enter User Details</h1>
              </label>
            </div>
            <div className="form-group col-md-12 content form-block-holder">
              <Label htmlFor="firstname" className="control-label col-md-4">
                First Name
              </Label>
              <Col md={8}>
                <Control.text
                  model=".firstname"
                  id="firstname"
                  name="firstname"
                  placeholder="First Name"
                  className="form-control"
                  validators={{
                    required,
                    minLength: minLength(3),
                    maxLength: maxLength(15)
                  }}
                />
                <Errors
                  className="text-danger"
                  model=".firstname"
                  show="touched"
                  messages={{
                    required: "Required",
                    minLength: "Must be greater than 2 characters",
                    maxLength: "Must be 15 characters or less"
                  }}
                />
              </Col>
            </div>
          </LocalForm>
        </div>
      </div>
    );
  }
}

После проверки мне нужно отправить вход в другой компонент Step2.js

import React, { Component } from 'react';
import Data from './Step3'
export default class Step2 extends Component {
  constructor(props) {
    super(props);
  };

  jumpToStep(toStep) {
    // We can explicitly move to a step (we -1 as its a zero based index)
    this.props.jumpToStep(toStep-1); // The StepZilla library injects this jumpToStep utility into each component
  }

  render() {
    return (
      <div className="step step5 review">
        <div className="row">
          <form id="Form" className="form-horizontal">
            <div className="form-group">
              <label className="col-md-12 control-label">
                <h1>Step 4: Review your Details and 'Save'</h1>
              </label>
            </div>
            <div className="form-group">
              <div className="col-md-12 control-label">
                <div className="col-md-12 txt">
                  <div className="col-md-4">
                    FirstName
                  </div>
                  <div className="col-md-4">
                    {this.props.FirstName} // How can i render my FIRSTNAME and display it here.
                  </div>
                </div>
                </div>
            </div>
          </form>
        </div>
      </div>
    )
  }
}

После этого я отправлю данные в мою БД.

Вопрос:

Как я могу передать проверенные данные из Step1 в Step2 составная часть? Нужно ли хранить данные перед отправкой в ​​другой компонент?

Как мне это сделать?

Любая помощь приветствуется.

Спасибо

Answer 1

Короче говоря, вы можете сделать это, следуя концепции формы мастера.

Так что если у вас есть 3 шага, то ваши 3 формы должны быть настроены так же, как показано ниже:

export default reduxForm({
  form: 'wizard', // <------ same form name for the 3 forms
  destroyOnUnmount: false, // <------ preserve form data
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
  validate
})(WizardFormFirstPage)

Таким образом, все, что вы заполняете в Шаге 1, Шаг 2, Шаг 3, будет храниться только в одном месте в вашем Магазине. Он будет расположен в: state.form.wizard,

Поэтому, когда вы успешно отправите Шаг 1 (проверка будет запущена для каждого шага), на следующем Шаге (Шаг 2) вы получите доступ к уже отправленным данным Шаг 1 через state.form.wizzard, Та же логика действительна для всех остальных шагов.

Здесь очень хорошо задокументировано, как сделать форму мастера (с помощью библиотеки redux-form).

---

Если мастер не в вашем случае, вы можете легко получить доступ к значениям формы через formValueSelector следующим образом:

import { formValueSelector } from 'redux-form' // ES6

const mapStateToProps = state => {
  const selector = formValueSelector('myFormName')
  const firstName = selector(state, 'firstname')

  return { firstName }
}