如果我创建一个单页表单并尝试创建一个业务,它可以工作,但当我尝试在多步骤表单中做同样的事情时,它就不行了。我可以看到每个表单的数据,但它只是不成功提交出于某种原因。我使用Redux工具包将数据存储在organizationReducer中。我能做错什么?我是否要为每个表单创建一个单独的表单?
import Stepper from "./components/Stepper";
import Account from "./components/steps/Account";
import Details from "./components/steps/Details";
import Payment from "./components/steps/Payment";
import { useDispatch, useSelector} from "react-redux";
import { useNavigate } from "react-router-dom";
import { createOrganization} from "../../../features/organization/organizationSlice";
const Onboarding = () => {
const [step, setStep] = useState(0);
const steps = ["", "", "", ];
const navigate = useNavigate();
const dispatch = useDispatch();
const { isError, isSuccess, message } = useSelector((state) =>state.organization);
const [formData, setFormData] = useState({
businessName: "",
businessEmail: "",
currency: "",
industry: "",
businessDescription: "",
useCase: "",
organizationType: "",
website: "",
businessPhone: "",
country: "",
billingName: "",
billingEmail: "",
addressState: "",
addressCity: "",
addressStreet: ""
});
const displayStep = () => {
switch (step) {
case 0:
return <Account formData = {formData} setFormData ={setFormData}/>;
case 1:
return <Details formData = { formData} setFormData ={setFormData}/>;
case 2:
return <Payment formData = { formData } setFormData ={setFormData}/>;
}
};
const handleSubmit = () => {
if (step === 0) {
if (formData.businessName === '') {
toast({
title: 'Error',
description: ('Please provide a business name'),
status: 'error',
position: 'top-right',
duration: 3000,
isClosable: true,
})
} else {
setStep(step + 1);
}
} else if (step === 1) {
if (formData.website === '') {
toast({
title: 'Error',
description: ('Please provide a website'),
status: 'error',
position: 'top-right',
duration: 3000,
isClosable: true,
})
} else {
setStep(step + 1);
}
} else if (step === 2) {
if (formData.billingName === '') {
toast({
title: 'Error',
description: ('Please provide a billing name'),
status: 'error',
position: 'top-right',
duration: 3000,
isClosable: true,
})
} else {
dispatch(createOrganization(formData))
}
}
};
return (
<>
{ /* Stepper */ }
< Stepper steps = {steps} step = {step} /> >
{displayStep()}
<Flex>
<Box>
{step > 0 && <Button onClick = {() => setStep(step - 1)}>Back< /Button>}
</Box> <
Spacer / >
<Box>
<Button onClick = {handleSubmit}>
{step === 0 || step === 1 ? "Next" : "Submit"}
</Button>
这是其中一种形式,它们看起来都是这样的
import { Center, Heading, Box, FormLabel, Select, Input, Text } from "@chakra-ui/react";
export default function Account({ formData, setFormData }) {
return (
<div>
<Box w="100%" mb={4}>
<FormLabel ml={2} fontWeight="bold" fontSize="15px">
Business Name
</FormLabel>
<Center>
<Input
w="500px"
fontSize="14"
name="businessName"
onChange={(e) => {setFormData({...formData,businessName: e.target.value,});
}}
value={formData.businessName}
type="name"
/>
</Center>
</Box>
<Box w="100%" mb={4}>
<FormLabel ml={2} fontWeight="bold" fontSize="15px">
Business Email
</FormLabel>
<Center>
<Input
w="500px"
fontSize="14"
name="businessEmail"
onChange={(e) => {
setFormData({
...formData,
businessEmail: e.target.value,
});
}}
value={formData.businessEmail}
type="email"
/>
</Center>
</Box>
<Box w="100%" mb={4}>
<FormLabel ml={2} fontWeight="bold" fontSize="15px">
Currency
</FormLabel>
<Center>
<Select
w="500px"
fontSize="14"
placeholder="Select option"
onChange={(e) => {
setFormData({
...formData,
currency: e.target.value,
});
}}
value={formData.currency}
name="currency"
>
<option value="founder">USD</option>
<option value="engineer">Naira</option>
<option value="engineer">Pounds</option>
<option value="engineer">Yen</option>
<option value="engineer">Euros</option>
<option value="engineer">Cedis</option>
</Select>
</Center>
</Box>
<Box w="100%" mb={4}>
<FormLabel ml={2} fontWeight="bold" fontSize="15px">
Industry
</FormLabel>
<Center>
<Select
w="500px"
fontSize="14"
placeholder="Select option"
onChange={(e) => {
setFormData({
...formData,
industry: e.target.value,
});
}}
value={formData.industry}
name="industry"
>
<option value="founder">Blockchain</option>
<option value="engineer">Engineering</option>
<option value="engineer">Fintech</option>
</Select>
</Center>
</Box>
<Box w="100%" mb={4}>
<FormLabel ml={2} fontWeight="bold" fontSize="15px">
Business Description
</FormLabel>
<Center>
<Input
w="500px"
fontSize="14"
name="businessDescription"
onChange={(e) => {
setFormData({
...formData,
businessDescription: e.target.value,
});
}}
value={formData.businessDescription}
type="text"
/>
</Center>
</Box>
<Box w="100%" mb={4}>
<FormLabel ml={2} fontWeight="bold" fontSize="15px">
Use Case
</FormLabel>
<Center>
<Input
w="500px"
fontSize="14"
name="useCase"
onChange={(e) => {
setFormData({
...formData,
useCase: e.target.value,
});
}}
value={formData.useCase}
type="text"
/>
</Center>
</Box>
</div>
);
}
store.js
import organizationReducer from "../features/organization/organizationSlice";
export const store = configureStore({
reducer: {
organization: organizationReducer
},
});
1条答案
按热度按时间ctrmrzij1#
所以你可以把所有的表单控件 Package 成一个表单,然后不是根据活动步骤不显示这些表单,而是显示隐藏它们,这样它们就可以通过表单跟踪,最后你只需要触发提交表单,它就会给你所有的数据,就像这样:
有关获取值的信息,请参考以下内容:here
你必须有隐藏的 prop 上的所有步骤comps和使用它如下: