在前端开发中,表单是一项相对繁琐而且重要的工作,特别是对于一些复杂的表单来说。react-form-builder-advanced 是一个适用于 React 应用的 npm 包,提供了一种简化表单构建过程的解决方案。
安装
npm install react-form-builder-advanced
使用
基本使用
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----------- ---- ------------------------------ ----- ----- - - - ---- ------------ ----- ----- ------- ----- --- --------- ------- ------ -------- - ------ -------- ------------ -------------- -- -- -- --- -- ----- --- ------- --------------- - -------- - ------ - ----- ----------------------------- -------------------- ---------------------- ---------------------- -- ------ -- - - ------ ------- ----
API
- initialValues: 初始表单具体配置
- toolbarItems: 工具栏项元数据
- onSave: 表单保存回调函数
- onCreate: 表单创建回调函数
- onUpdate: 表单更新回调函数
示例
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ----------- ---- ------------------------------ ------ ------------ ---- ------------------- ----- ----- - - - ---- --------- ----- ------- ------ ------ ------ ------ ----- --- --------- ------- ------- ----- -------- - ----- --------- ----- ----- ---- ------- -- -- - ---- ------------ ----- ---------- ------ ----- --- ------------ ------- ------- ----- -------- - ----- ------------ ----- ----- ---- ------------- -- -- - ---- ----------- -------------- ----- ----- ----------- ----- --- ---------------------- ------- ------ ----------- ----------- ------------ -------- --- - -- ---- ---- ----------- -- ----- --- ------- --------------- - ------------------ - ------------- ---------- - - ----------- --- -- - ------------------- - -- ------ --- ---------- ----- ----- -- ------- -- ------------------------------------------- - ----- ---------- - ------------------------------------------------------ --------------- ---------- --- - - ---------- - --- -- - --------------- ----- - ---------- - - ----------- ----- ------ - --------------------------- ----- -------- - ------------------ ------------------------ -------------------- ---------- -- ------------ - --- -- - --------------- -- ------------ - --- -- - --------------- ----- - ---- - - -- ----- - --- ------- - - ----- ----- - ---------- - - ----------- ----- ----------------- - -------------------------------- --- ------ --------------- ----------- ----------------- --- -- ---- --- ---- ------------- -- - ---- ------ ---------------------------------- ----------------------------------- -- ---------------- - ---- - ------- - ----- - -- -- - ----- - ---------- - - ----------- ----- ----------------- - --------------------- -- - -- -------- --- --- - ------ - -------- -------- - ---------------- ----- ------ -- -- - ------ ----- --- -- ------ --- ---- ------------- --------------- ----------- ----------------- --- -- -------- - ----- - ---------- - - ----------- ------ - ----- ----------------------------- -------------------- ------------------------ ---------------------------- ---------------------------- ----------------- -- ----- ----------------- ----------------------------- ----------------- -- ------ ------ -- - - ------ ------- ----
结论
使用 react-form-builder-advanced 可以极大地简化表单开发过程,减少冗长的表单组件代码,提高生产率,还允许在表单保存时将其导出为 JSON 配置文件,实现跨系统表单配置。如果您正在进行 React 表单开发,那么此 npm 包是您不可或缺的工具之一。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066b5351ab1864dac6693d