是一个 工具包,用于使用 和 构建跨平台移动应用程序。年初发布的 5 附带了对 的官方支持,使 React 开发人员能够使用他们最喜欢的工具轻松构建移动应用程序。然而,对使用表单的支持并不多,并且许多可用于在 React 生态系统中构建表单的现有库与 的组件不能很好地配合。 在本教程中,您将学习如何使用 的 UI 输入组件构建表单。您还将学习如何使用库来帮助检测表单输入更改并响应验证规则。最后,您将学习通过向输入的 ARIA 属性添加有用的文本,使屏幕阅读器可以访问您的表单。 的表单组件 表单是当今大多数网络和移动应用程序的重要组成部分。无论您是通过用户注册和登录表单来允许访问应用程序的受限部分,还是收集用户的反馈,您都必须在应用程序生命周期的某个时刻构建一个表单。
提供了用于处理表单的预构建组件
其中一些包括复制 将为我们提供一个登录表单,如下所示: 上的标准登录表单(大预览) 的表单组件开箱即用,在 或 上看起来很棒,但如果您使用 React,它们可能会有点笨拙。与 生态系统中的大多数工具一样,在功能和可访问性方面,您必须决定如何构建表单 – 两者与设计同样重要。 虽然已经有很多 React 表单助手可供选择,但大多数都不能与 的表单组件一起使用。我怀疑造成这种情况的主要 意大利电话号码列表 原因是当 中的字段值更改时触发的事件是,而大多数现有表单库侦听. 字段更改时触发更改事件(大预览:小而快速的 库 值得庆幸的是,这并不全是厄运和阴郁。我最近遇到了,这是一个用于在 项目中处理表单的库。它为受控或非受控组件以及输入验证提供支持,并且 API 是基于钩子的,因此它仅适用于功能组件。
开发人员来说最有吸引力的功能是
它提供的用于处理受控组件的包装组件。该组件有一个,于为您传递给它的任何组件实例指定更改事件名称。在接下来的部分中,我将向您展示这如何使 中的表单处理变得非常简单。 认识移动界面的触摸设计,的全新移动设计指南,具有经过验证的、通用的、以人为本的指南。页,充满了深入的用户研究和最佳实践。 跳转至目录 ↬ 功能面板 建立注册表单 让我们看看当我们在 中构 AO 列表 建注册表时,如果您正在运行最新版本的,请通过运行以下命令使用 启动新的 应用程序: 复制 我在这里使用了一个空白模板。您应该能够重写现有表单以轻松使用 库,特别是当您的组件被编写为功能组件时。 要开始使用表单,请通过在项目的根目录中运行以下命令来安装 包: 复制 这将使 库在您的项目中可用。让我们使用该库创建一个表单输入字段。 复制 这将为您提供一个带有单个字段的表单来收集电子邮件地址。让我们分解重要的部分(在代码块中突出显示)。