简介
Final-form-arrays(以下简称 FFA)是一个npm包,它提供了一个轻量级的、易于使用的表单解决方案,旨在帮助开发者快速地建立前端表单。FFA也提供了一系列扩展功能,如数组表单、提交、异步验证和字段级别访问控制等。
安装和使用
FFA可以通过npm来安装:
npm install final-form-arrays --save
安装后,可以通过 import
或 require
方式来引用。
一个简单的例子
下面展示了一个基于FFA的简单表单的实现。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ---- - ---- ------------------- ------ - ---------- - ---- -------------------- ----- ----------- - -------- -- - ----- ------ - --- -- -------------- - ----------- - ----------- - ------ ------- -- ----- -------- - -------- -- - -------------------- -- ----- --- - -- -- - ----- ----- ------------------- ----------------------- --- ------------- ---------- -- -- - ----- ------------------------ ----------- --------------- --- ------ -- -- - ----- ------------------ ------ -- - ---- ------------------------- --------------- -------- - ------------ ----- ------ ----------- ------------------ --------------------- -- ------ ------ --- ------- ------------- ----------- -- ------------- ----- -- ---- --- ------ --------- ------ -- ------------- ------- ------------- ---------------------- ------ --------- ------- -- ------- ------ -- ------ ------- ----
这个例子创建了一个带有名为 members
的字段数组的表单,数组中的每个元素都包含 name
字段。在表单提交时,数组的值将作为整个表单的一部分进行操作。
API 参考
FieldArray
FieldArray 是 FFA 的一个核心组件,可以简单、快速地创建字段数组。它接收一个 name
属性,它定义了数组的名称。
以下是一个简单的 FieldArray 范例:
-- -------------------- ---- ------- ----------- --------------- --- ------- ---- -- -- - ----- ------------------ ------ -- - ---- ------------------------- --------------- -------- - ------------ ----- ------ ----------- ------------------ --------------------- -- ------ ------ --- ------- ------------- ----------- -- ------------- ----- -- ---- --- ------ --------- ------------- -- ---------- -- -------------------------- ------ -- -------------
在这个例子中,当 FieldArray
接收到一个名为 members
的属性时,它会渲染一个包含了名为 name
的输入框的数组。它也会渲染一个按钮,该按钮会在数组中添加一个新的元素。
当表单中使用了这个 FieldArray
组件时,每个数组项都会被包含在结果对象的 members
数组中。
ArrayMutators
ArrayMutators
是一个用于操作数组的组件,可以通过props方式向Field做注入。
以下是一个简单的例子:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ---- - ---- ------------------- ------ - ----- - ---- ------------------- ------ - ----------- ---------- - ---- -------------------- ------ - ------------- - ---- -------------------- ----- ----- - - - --- --------- ----- --- ---------- -- - --- --------- ----- --- --------- ----- -- - --- --------- ----- --- --------- ------ - -- ----- -------- - ------ -- - ---------------------------------- ----- ---- -- ----- ----- - -- -- - ----- -------------------- --- ------------- ----- - -------- - -- -- - ----- ------------------------ -------------- ------------------- -- ----------- ------------- --- ------ -- -- ----------------- ------ -- - ---- ----------- ------ ------------------- ----------------- ------------- -- ----------- ------- - ---------- ------ --------------------- ----------------- ------------------ -- ------- ------------- ----------- -- ------------------------ -------- ------ --------- ------ --- ------------- ------- ------------- ----------- -- ---------------------- --------------- --- ---- --------- ------- ----------------------------- ------- -- ------- -- ------ ------- ------
在这个例子中,ArrayMutators组件是一个用于集成数组操作的函数;在这个例子中,你仅仅注入到form的mutators里只是remove和push两个hooks,而其他9个完整的hooks则需要原始的名为mutators的对象来提供。
注意事项
为了成功地使用Final-form-arrays,需要核对你的项目环境,特别是你的依赖项是否与使用的版本兼容。
兼容性
FFA 目前支持以下版本:
- React: 15.4.0 或更高版本
- React-dom: 15.4.0 或更高版本
- Final Form: 4.21.0 或更高版本
结论
随着对前端技术栈和工具的持续发展,我们迫切需要一个行之有效的表单解决方案。使用 Final-form-arrays,你可以轻松地创建、管理和提交表单,而不必担心复杂的状态管理和数据传输。
FFA 的可定制性和灵活性也使它适合解决各种前端表单问题,在一定程度上提高了开发效率。希望这篇文章对你有所帮助!
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedaa41b5cbfe1ea06103f5