介绍
Pedestrian 是一个用于创建基于 Web 的表单的 JavaScript 库。它是基于 React 构建的，提供了很多丰富的组件和功能，使得表单的创建变得轻松而高效。本篇文章将介绍 Pedestrian 的基本用法，以及如何应用它来创建优美的表单。
安装 Pedestrian
安装 Pedestrian 最简单的方式是使用 npm 包管理器。在项目目录内打开终端，运行如下命令：
--- ------- ----------
这将会安装最新版本的 Pedestrian 包到你的项目中。
Pedestrian 的基本使用
导入 Pedestrian
在你的 React 组件中，需要通过导入 Pedestrian 来使用它提供的组件和功能。
------ - ----- ------ ------ - ---- -------------
创建表单
创建一个基本的表单非常简单。你只需要将 Form 组件放置在 JSX 中，并添加相关的 Props。
----- ------------------ -- -------------------- - ------ --------------- ----------- -- ------ --------------- ---------- --------------- -- ------- ------------------------- -------
在这个例子中，我们创建了一个包括两个输入框和一个提交按钮的表单。当用户点击提交按钮时，表单的数据将会被打印到控制台上。
Pedestrian 组件
Pedestrian 提供了很多组件来帮助你构建表单。
Form
Form 组件是 Pedestrian 的核心组件，提供了一个包含所有子元素的表单。Form 的 Props 包括：
onSubmit: 在表单提交时触发的函数。initialValues: 设置表单的初始值，以便在表单渲染时使用。validate: 自定义验证函数，用于验证表单输入是否有效。validateOnChange: 在每次表单输入改变后都执行验证函数。validateOnBlur: 当焦点移出输入框时执行验证函数。enableReinitialize: 允许表单重新初始化，以便在使用默认值时更好地更新表单。
Input
Input 组件是一个用于输入的文本框。Input 的 Props 包括：
name: Input 组件的名称，将会在表单提交时作为键名。label: Input 组件的标签，用于说明该输入框的作用。placeholder: Input 组件的占位符文字。type: Input 组件的类型，例如text、password或email。validate: 自定义验证函数，用于验证输入是否有效。defaultValue: 设置输入框的默认值。disabled: 禁用该输入框。
Button
Button 组件是一个用于提交表单的按钮，它的类型可以设置为 submit 或 reset。
使用示例
以下是一个较完整的 Pedestrian 使用示例：
------ - ----- ------ ------- -------- - ---- -------------
----- ------ - -- -- -
-------
----- ------------------ -- ---------------------
------ ---------------- ---------- --
------ --------------- ---------- --
--------- ---------------------------------------
------- -------------------------
-------
-
-
------ ------- -------在这个例子中，我们创建了一个基本的表单，包括两个输入框和一个复选框。当用户点击提交按钮时，表单的数据将会被打印到控制台上。
结论
Pedestrian 是一个强大且易用的表单库，它可以帮助你在 React 中创建优美且高效的表单。我们介绍了 Pedestrian 的基本用法和几个核心组件，让你在使用 Pedestrian 时更加深入了解。我们希望这篇文章对你有所帮助，也希望你能在自己的项目中成功应用 Pedestrian，并以此创造出更加美妙的表单。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67328