如何解决无法在浏览器中显示React表单
我不确定为什么表单没有显示在浏览器中。
formComponentDict变量未显示任何表单步骤。我想念什么? 任何帮助。谢谢
const formComponentDict = {
1: () => (
<FormPersonalDetails
nextStep={this.nextStep}
handleChange={this.handleChange}
values={values}
/>
),2: () => (
<FormBusinessDetails
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange={this.handleChange}
values={values}
/>
),3: () => (
<FormProductDetails
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange={this.handleChange}
values={values}
/>
),4: () => (
<FormConfirmation
nextStep={this.nextStep}
prevStep={this.prevStep}
values={values}
/>
),5: () => <FormSubmission />,};
return formComponentDict[step] ? (
formComponentDict[step]
) : (
<p>Invalid Form</p>
);
解决方法
由于您将每个组件存储为返回formComponentDict
中组件的函数,因此,当以下情况时,组件将返回一个函数,该函数返回一个组件(FormBusinessDetails
,FormPersonalDetails
...)它应该返回组件(FormBusinessDetails
,FormPersonalDetails
...)本身。尝试如下更改formComponentDict
:
const formComponentDict = {
1: (
<FormPersonalDetails
nextStep={this.nextStep}
handleChange={this.handleChange}
values={values}
/>
),2: (
<FormBusinessDetails
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange={this.handleChange}
values={values}
/>
),3: (
<FormProductDetails
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange={this.handleChange}
values={values}
/>
),4: (
<FormConfirmation
nextStep={this.nextStep}
prevStep={this.prevStep}
values={values}
/>
),5: <FormSubmission />,};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。