在 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中填写的内容将只保留在您的Store中的一个位置。它将位于：state.form.wizard。

因此，当您成功提交 Step1（每个 Step 将触发验证）时，在下一步（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 }
}