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

Question

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

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 是 header 主页上的一个表格。实际上是一个新屏幕。像这样它实际上显示了 header 内的整个屏幕。那么你能给我一个建议，我如何处理输入值并同时重定向到另一个页面吗？

谢谢！

Answer 1

您可以使用 ternary operators to conditionally render the components. As well, for your nextStep and prevStep functions, see below implementation, you can read more about this on the official docs here。您也可以将状态直接作为 props 传递给 <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;

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

Redirect to another screen on the second step of the form

reactjs

forms

redirect

router

multi-step