ReactJS - 表单编程

表单是 Web 应用程序的常见部分，主要用于允许用户与应用程序交互。这些表格可能包含在网页上，以收集用户的信息，让用户搜索网站，进行付款等。表单可以包含的基本元素包括输入字段、按钮、清单、下拉菜单等。从这些表单中获得的数据通常由 React 中的组件处理。

为了学习如何在 React 中使用表单，让我们看一些例子。

表单编程

与HTML不同，HTML会根据用户输入数据更新表单，而React则借助其状态来更新表单。可变状态通常在组件的 state 属性中指定，并且仅使用 setState（）进行更新。

表单编程的本质需要保持状态。因为，当用户与表单交互时，输入字段信息将发生变化。但正如我们之前所了解到的，React 库本身并不存储或维护任何状态信息，组件必须使用状态管理 API 来管理状态。考虑到这一点，React 提供了两种类型的组件来支持表单编程。

受控组件 - 在受控组件中，React 为所有输入元素提供了一个特殊属性，值并控制输入元素。value 属性可用于获取和设置输入元素的值。它必须与组件的状态同步。
不受控制的组件 - 在不受控制的组件中，React 为表单编程提供了最低限度的支持。它必须使用 Ref 概念（另一个 react 概念，用于在运行时在 React 组件中获取 DOM 元素）来执行表单编程。

在本章中，让我们学习使用受控和不受控组件的表单编程。

打印本页