在表单的第二步重定向到另一个屏幕

Question

我的主页中有一个表单，即 InstantQoute。因此，当用户继续使用表单时，我想在新页面中显示表单的其余部分。所以这是我的父表单：

import React, { Component } from "react";
import Checkout from "../screens/Checkout";
import InstantQuote from "./InstantQuote";

export class UserForm extends Component {
  state = {
    step: 1,
    zipFrom: "",
    zipTo: "",
    vehicleYear: "",
    vehicleMake: "",
    vehicleModel: "",
  };

  // Proceed to next step
  nextStep = () => {
    const { step } = this.state;
    this.setState({
      step: step + 1,
    });
  };

  // Go back to prev step
  prevStep = () => {
    const { step } = this.state;
    this.setState({
      step: step - 1,
    });
  };

  // Handle fields change
  handleChange = (input) => (e) => {
    this.setState({ [input]: e.target.value });
  };

  render() {
    
    const { step } = this.state;
    const {
      zipFrom,
      zipTo,
      vehicleYear,
      vehicleMake,
      vehicleModel,
    } = this.state;
    const values = {
      zipFrom,
      zipTo,
      vehicleYear,
      vehicleMake,
      vehicleModel,
    };

    switch (step) {
      case 1:
        return (
          <InstantQuote
            nextStep={this.nextStep}
            handleChange={this.handleChange}
            values={values}
          />
        );
      case 2:
        return <Checkout />;
      default:
        return "Unknown step";
    }
  }
}

export default UserForm;

所以就像我说的，InstantForm 是首页上的一个表格。实际上是一个新的屏幕。像这样它实际上显示了标题内的整个屏幕。那么您能否给我一个建议，我该如何处理输入值并同时重定向到另一个页面？

谢谢！

Answer 1

您可以使用ternary operators 到conditionally render 的组件。同样，对于您的nextStep 和prevStep 函数，请参见下面的实现，您可以在官方文档here 上阅读更多相关信息。您也可以将状态作为道具直接传递给您的 <InstantQuote /> 组件，因为它似乎需要大部分内容，如果您愿意，可以随意更改。

import React, { Component } from "react";
import Checkout from "../screens/Checkout";
import InstantQuote from "./InstantQuote";

export class UserForm extends Component {
    state = {
        step: 1,
        zipFrom: "",
        zipTo: "",
        vehicleYear: "",
        vehicleMake: "",
        vehicleModel: "",
    };

    // Proceed to next step
    nextStep = () => this.setState(prevState => ({step: prevState.step + 1}));

    // Go back to prev step
    prevStep = () => this.setState(prevState => ({step: prevState.step - 1}));

    // Handle fields change
    handleChange = (input) => (e) => {
        this.setState({ [input]: e.target.value });
    };

    render() {
        return (
            step == 1 ?
                <InstantQuote
                    nextStep={this.nextStep}
                    handleChange={this.handleChange}
                    values={this.state}
                /> :
                step == 2 ?
                    <Checkout />
                    : <p>Unknown step</p>
        )
    }
}

export default UserForm;