介绍
Pedestrian 是一个用于创建基于 Web 的表单的 JavaScript 库。它是基于 React 构建的，提供了很多丰富的组件和功能，使得表单的创建变得轻松而高效。本篇文章将介绍 Pedestrian 的基本用法，以及如何应用它来创建优美的表单。
安装 Pedestrian
安装 Pedestrian 最简单的方式是使用 npm 包管理器。在项目目录内打开终端，运行如下命令：
npm install pedestrian
这将会安装最新版本的 Pedestrian 包到你的项目中。
Pedestrian 的基本使用
导入 Pedestrian
在你的 React 组件中，需要通过导入 Pedestrian 来使用它提供的组件和功能。
import { Form, Input, Button } from 'pedestrian';创建表单
创建一个基本的表单非常简单。你只需要将 Form 组件放置在 JSX 中，并添加相关的 Props。
<Form
onSubmit={(values) => console.log(values)}
>
<Input name="username" label="用户名" />
<Input name="password" label="密码" type="password" />
<Button type="submit">提交</Button>
</Form>在这个例子中，我们创建了一个包括两个输入框和一个提交按钮的表单。当用户点击提交按钮时，表单的数据将会被打印到控制台上。
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