是否以react-redux-form将用户输入的表单数据从一个组件发送到另一个组件？

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)

这样做，您填写的Step1，Step2，Step3将只保存在您的商店中的一个地方。它将位于：state.form.wizard。

因此，当您成功提交Step1 (每一步都会触发验证)时，在下一步(Step2)上，您将可以通过state.form.wizzard访问已经提交的Step1数据。同样的逻辑也适用于所有其他步骤。

Here's very well documented how to do a Wizard form (通过redux-form库)。

如果您不使用该向导，则可以通过formValueSelector轻松访问表单值，如下所示：

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

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

  return { firstName }
}