react如何实现多个表单下一步和上一步

实现多个表单下一步和上一步可以通过以下步骤实现：

1、创建一个父组件，用于管理所有表单数据和状态，以及渲染不同的子表单组件。

2、在父组件中定义一个状态currentStep，用于表示当前显示的表单索引。

3、在父组件中定义一个方法nextStep和prevStep，用于切换当前表单的索引，实现下一步和上一步的 *** 作。

4、在父组件中定义一个方法handleSubmit，用于提交表单数据。

5、在子表单组件中，定义表单元素和事件处理程序。

6、在子表单组件中，定义一个方法handleNext，用于调用父组件的nextStep方法，切换到下一个表单。

7、在子表单组件中，定义一个方法handlePrev，用于调用父组件的prevStep方法，切换到上一个表单。

8、在最后一个子表单中，定义一个提交按钮，用于提交表单数据，调用父组件的handleSubmit方法。

纯属搬砖，翻译自原文 Controlled and uncontrolled form inputs in React don't have to be complicated

非控制的input很像传统的HTML表单input

他们能记住你输入的内容，你可以获取他们的值通过使用 ref 。比如，在一个按钮的onClick事件：

换句话说， 你必须去'拉取(pull)'这个字段的值当你需要它的时候 。这可以发生在表单已经被提交的时候。

那是实现表单input的最简单的方法。当然有的时候用它会很有效：在简单的表单中，还有学习React的时候。

但他不够强大，接下来看看那些受控的input

一个受控制的input 接受当前的“值”作为属性，和一个回调函数去改变那个“值”，你可以说这个方法更“React”（但不意味着你必须一直用它）

这个input的“值”必须保存在 state 里。典型的，渲染那个input的组件保存在他的 state :

(当然，他可以在另一个组件的state，甚至是分离的state store里)

每次当你输入一个新的字符， handleNameChange 就被调用。它获取input的最新值并把它更新到state。

还有其他的控件，比如 checkboxes 、radios a、selects 、 textareas。

让一个元素“受控”就是通过一个属性设置它的值。

每个表单控件都有不同的属性去设置它的值，以下是汇总表格：

受控和非受控表单控件都有各自的有点。 评估你的具体状况选择最适合的方法

如果你的表单很简单，仅限于UI的反馈，非受控的配合refs完全可以。你不必听那些各种文章说的“不好”

react。vue开发低代码表通过运行是不会出现单的情况的，因此是react。代码（code）是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、符号或信号码元以离散形式表示信息的明确的规则体系。

antd3思想：使用HOC（高阶组件）包裹form表单，HOC组件中的state存储所有的value值，定义设置值和获取值的方法

缺点：动一发牵全身，一个value值改变，因为这是顶级状态，所以所有的子组件都会因父组件的重新render而render,浪费了性能

antd4思想：使用Context 包裹form表单，自定义一个store类，存储所有的表单value值，定义设置值和获取值得方法，因为不是组件内部状态，需要自己定义更新函数，在每个FormItem中定义forceUpdate()强制更新函数，当我们setValue值得时候，根据name值判断出要更新的FormItem,可以调用该Item的更新函数更新，相比ant3节约了性能（个人觉得这个思想类似Vue了，涉嫌抄袭）

ant4简单原理展示

基本用法,拷贝整理下可测试

Form/indexjs 文件,这个文件没啥，就是导入一下导出，用了 一下ReactforwardRef api

Form 文件

Fieldjs 文件,基本算个消费者，接收并使用context中的方法

useFormjs 提供存储数据，增改数据的方法

Inputjs

contextjs

FormPagejs

Formjs

Inputjs和上面没变化

获取表单数据。蚂蚁组件表单收集数据，需要点击获取表单数据，Antd是蚂蚁金服开源的一款企业级的组件库，基于react，最近在学习react，自然也免不了Antd的学习，Antd中将原生的标签都封装为一个个组件。

近期在开发团队官网的过程中碰到了需要运用表单的场景，去年学习React时是通过网上的视频教程自学的，课程的小demo中用户输入数据的收集是通过input框，结合ref实现的，因此形成了思维定式，每一次收集用户数据都用这种方式。一个偶然的机会才猛然想起使用表单，功能开发完后写下此文，记录这次学习的内容。

FormuseForm()：创建form控制实例，不提供时会自动创建

onFinish：提交表单且数据验证成功后回调事件

validateFields：触发表单校验

getFieldValue：获取表单指定字段的值

name：字段名，在getFieldValue传入这个值可以获取字段的数据

label：字段的标签

关于Antd表单的内容有补充时另写。

通过在form标签或其提交按钮中的action、method、submit等属性来提交表单

通过js中调用submit函数提交表单，action、method等属性在form标签中定义

通过DOM技术收集表单数据，再作为请求的query或body提交。

1、刷新

form提交，在更新数据完成后，会转到一个空白页面再对原页面进行提交后处理，即便是提交给自己本身的页面，从这点来说form提交用户体验较差；AJAX是局部刷新，不会跳转，刷新效率更高，用户体验更好。

2、支持

form只支持GET/POST两种请求。

3、适用场景

form适合前后端不分离项目；AJAX适合前后端分离项目。

参考资料和原文

以上就是关于react如何实现多个表单下一步和上一步全部的内容，包括:react如何实现多个表单下一步和上一步、React 什么时候该使用受控和非受控表单控件、vue开发低代码表单还是react等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！