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

问题描述

我的主页中有一个表格，它是 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,};

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

谢谢！

解决方法

您可以使用 ternary operators 来 conditionally render 组件。同样，对于您的 nextStep 和 prevStep 函数，请参见下面的实现，您可以在官方文档 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;