时间戳

首页 > 解决方案 > 使用单个类组件 spfx/react/typescript 时如何将一个表单分成几个不同的页面

reactjs - 使用单个类组件 spfx/react/typescript 时如何将一个表单分成几个不同的页面

问题描述

我有一个类组件，我想创建一个跳过不同页面的下一个和上一个按钮。我不想要长表格并找到必要的按钮。我创建了一个使用单个有状态类组件的 spfx webpart。渲染中包含所有字段。我在网上看过，发现将字段分成单独的组件是最好的方法，并且有一个父容器comp。和几个儿童比赛。我不想这样做。原因？我正在学习如何在一个单独的项目中做到这一点，所以这个项目需要这样做。

有没有一种简单的方法来分割渲染的字段，所以当单击下一个按钮时，它会隐藏第 1 页然后显示第 2 页？请记住，所有这些字段都在同一个渲染中！我对此逻辑很好，但需要知道是否可以将某些东西放入渲染中，例如将 <Form />其分解为不同的形式，然后在此基础上运行三元条件？

标签： reactjsspfx

解决方案

我能理解的是，对于其中包含大量输入字段的长表单，您希望拥有上一个下一个功能，该功能将隐藏一些字段并根据按钮单击显示所需字段。

您可以做的是通过维护像“PageNo”这样的状态属性，并且您可以在该状态参数中维护页码，当您单击下一个/上一个按钮时，您可以编写简单的逻辑来增加和减少 PageNo 值.

由于您不想为各个页面维护各种组件，因此您可以将整个代码编写在一个页面上，并且您可以通过“PageNo”状态参数的值来操作容器 div 的显示/隐藏。

喜欢，

<div style={{ display: this.state.PageNo == 1 ? 'block' : 'none' }}>
// Page 1 Content goes here
</div>
<div style={{ display: this.state.PageNo == 2 ? 'block' : 'none' }}>
// Page 2 Content goes here
</div>
<div style={{ display: this.state.PageNo == 3 ? 'block' : 'none' }}>
// Page 3 Content goes here
</div>

因此，像这样您可以实现所需的功能。

但是，最好的方法是为每个页面维护单独的子组件和一个用于导航的父组件。页。

推荐阅读