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个表单：

#at the top of your code
import time

#in your loop add:
time.sleep(1)

通过这种方式，您在步骤1，步骤2，步骤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）上，您将可以通过state.form.wizard访问已提交的Step1数据。相同的逻辑对所有其他步骤均有效。

Here's very well documented how to do a Wizard form（由redux-form库提供）。

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

state.form.wizzard

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

1 个答案: