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

Question

我有一个 class 组件，我想创建一个跳过不同页面的下一个和上一个按钮。我不想要长表格并找到必要的按钮。 我创建了一个 spfx webpart，它使用一个有状态的 class 组件。渲染中包含所有字段。我在网上看过，发现将字段分成单独的组件是执行此操作并拥有父容器组件的最佳方法。和几个儿童伴奏。我不想这样做。原因？我正在学习如何在单独的项目中执行此操作，因此对于此项目需要以这种方式执行此操作。

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

Answer 1

我能理解的是，对于其中有很多输入字段的长表单，您希望有一个 previous next 功能，它将隐藏一些字段并根据按钮单击显示必填字段。

您可以做的是维护一个状态 属性，例如 'PageNo'，并且您可以维护该状态参数中的页码以及单击 next/prev 按钮的时间，您可以编写简单的逻辑来增加和减少 PageNo 值。

因为你不想为不同的页面维护不同的组件，所以你可以把整个代码写在一个页面上，你可以通过[的值来操作容器div的show/hide =23=] 状态参数.

喜欢，

<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>

所以，这样你就可以实现需要的功能了。

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