如何将表单对象作为道具传递给React功能组件?

Question

我正在尝试做一个多步骤表单，最后一个表单总结了用户在提交之前在前面步骤中写的信息。

但是当我输入时，即使控制台返回字符，它也不显示任何内容。

这是我转载该问题的链接。

我做错了什么，有没有更好的方法?

Answer 1

你必须从每个输入元素中删除'value'，因为value被设置为formdata值，它是空字符串。把这个

<Input
type="text"
id="lastName"
value={formData.form1.lastName}
onChange={(e) => formData.form1.setLastName(e.target.value)}
/>

到

<Input
type="text"
id="lastName"
onChange={(e) => formData.form1.setLastName(e.target.value)}
/>

，并对每个输入元素

执行相同操作

Answer 2

下面是一个工作示例。首先，您需要使用useState钩子来存储formData的状态。你正在使用全局变量，React不会重新渲染UI，除非组件props或state。

const [formData, setFormData] = useState({
form1: {}
form2: {}
});

然后你需要改变状态，我想为每个表单状态使用单个函数。

const onChange = (formName, fieldName, value) => {
setFormData(oldFormData => ({...oldFormData, [formName]: { ...oldFormData[formName], [fieldName]: value}}))
}

那么，PaymentForm组件应该是这样的。

import React from "react";
const PaymentForm = () => {
const [step, setStep] = useState(0);
const [formData, setFormData] = useState({
form1: {},
form1: {},
});
const onChange = (formName, fieldName, value) => {
setFormData((oldFormData) => ({
...oldFormData,
[formName]: { ...oldFormData[formName], [fieldName]: value },
}));
};
const onSubmit = () => {
console.log(formData);
};
return (
<div>
{step === 1 ? (
<Form1 formData={formData.form1} onChange={onChange} />
) : step === 2 ? (
<Form2 formData={formData.form2} onChange={onChange} />
) : step === 3 ? (
<Form3 formData={formData.form3} onChange={onChange} />
) : (
<Form4 formData={formData.form4} onChange={onChange} />
)}
</div>
);
};

然后使用onChange函数根据您的表单组件如下。

const Form1 = ({ formData, onChange }) => {
return (
<Flex direction="column" p={6} pb={0}>
<Heading w="100%" size="md" fontWeight="bold" mb="2%">
Customer
</Heading>
<Flex>

<FormControl isRequired>
<FormLabel htmlFor="email" fontWeight="normal">
Email address
</FormLabel>
<Input
id="email"
type="email"
value={formData.form1.email}
onChange={(e) => onChange("form1",e.target.name, e.target.value)}
/>
</FormControl>
</Flex>
</Flex>
);
};