ReactJS - 表单编程
表单是 Web 应用程序的常见部分,主要用于允许用户与应用程序交互。这些表单可能包含在网页上,用于收集用户信息、让用户搜索网站、付款等。表单可以包含的基本元素是输入字段、按钮、检查表、下拉菜单等。从这些表单获取的数据通常由 React 中的组件处理。
要了解如何在 React 中使用表单,让我们看一些示例。
表单编程
与 HTML 不同,HTML 中的表单会根据用户输入数据进行更新,而 React 会借助其状态来更新表单。可变状态通常在组件的状态属性中指定,并且仅使用 setState() 进行更新。
表单编程的本质需要维护状态。因为,输入字段信息会随着用户与表单交互而改变。但正如我们之前所了解的,React 库本身不存储或维护任何状态信息,组件必须使用状态管理 API 来管理状态。考虑到这一点,React 提供了两种类型的组件来支持表单编程。
受控组件 − 在受控组件中,React 为所有输入元素提供了一个特殊的属性 value,并控制输入元素。value 属性可用于获取和设置输入元素的值。它必须与组件的状态同步。
非受控组件 − 在非受控组件中,React 对表单编程提供了最低限度的支持。它必须使用 Ref 概念(另一个 React 概念,用于在运行时获取 React 组件中的 DOM 元素)来进行表单编程。
让我们在本章中学习使用受控和非受控组件进行表单编程。