如何解决重定向到表单第二步的另一个屏幕
我的主页中有一个表格,它是 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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。