React - 表单编程

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

要学习如何在 React 中使用表单，让我们来看一些示例。

表单编程

与 HTML 不同，在 HTML 中表单根据用户输入数据进行更新，而 React 通过其 state 来更新表单。可变 state 通常在组件的 state 属性中指定，并且只能使用 setState() 更新。

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

• Controlled component − 在 controlled component 中，React 为所有输入元素提供了一个特殊的属性 value，并控制这些输入元素。value 属性可用于获取和设置输入元素的值。它必须与组件的 state 保持同步。

• Uncontrolled component − 在 uncontrolled component 中，React 对表单编程提供的最小支持。它必须使用 Ref 概念（React 的另一个概念，用于在运行时获取 React 组件中的 DOM 元素）来进行表单编程。

在本章中，我们将使用 controlled component 和 uncontrolled component 来学习表单编程。

• Controlled component

• Uncontrolled Component

• Formik