ReactJS - 表单编程

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

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

表单编程

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

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

• 受控组件 - 在受控组件中，React 为所有输入元素提供了一个特殊的属性 value，并控制输入元素。value 属性可用于获取和设置输入元素的值。它必须与组件的状态同步。

• 非受控组件 - 在非受控组件中，React 对表单编程的支持最少。它必须使用 Ref 概念（另一个 React 概念，用于在运行时获取 React 组件中的 DOM 元素）来进行表单编程。

本章让我们学习使用受控和非受控组件进行表单编程。

• 受控组件

• 非受控组件

• Formik