npm 包 react-form-builder-advanced 使用教程

阅读时长 7 分钟读完

在前端开发中,表单是一项相对繁琐而且重要的工作,特别是对于一些复杂的表单来说。react-form-builder-advanced 是一个适用于 React 应用的 npm 包,提供了一种简化表单构建过程的解决方案。

安装

使用

基本使用

-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ------------------------------

----- ----- - -
  -
    ---- ------------
    ----- ----- -------
    ----- --- ---------
    ------- ------
    -------- -
      ------ --------
      ------------ --------------
    --
  --
  -- ---
--

----- --- ------- --------------- -
  -------- -
    ------ -
      -----
        -----------------------------
          --------------------
          ----------------------
          ----------------------
        --
      ------
    --
  -
-

------ ------- ----

API

  • initialValues: 初始表单具体配置
  • toolbarItems: 工具栏项元数据
  • onSave: 表单保存回调函数
  • onCreate: 表单创建回调函数
  • onUpdate: 表单更新回调函数

示例

-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ------------------------------
------ ------------ ---- -------------------

----- ----- - -
  -
    ---- ---------
    ----- ------- ------
    ------ ------ ------
    ----- --- --------- -------
    ------- -----
    -------- -
      ----- ---------
      ----- ----- ---- -------
    --
  --
  -
    ---- ------------
    ----- ---------- ------
    ----- --- ------------ -------
    ------- -----
    -------- -
      ----- ------------
      ----- ----- ---- -------------
    --
  --
  -
    ---- -----------
    -------------- -----
    ----- -----------
    ----- --- ---------------------- -------
    ------ -----------
    ----------- ------------
    -------- ---
  -
  -- ---- ---- -----------
--

----- --- ------- --------------- -
  ------------------ -
    -------------

    ---------- - -
      ----------- ---
    --
  -

  ------------------- -
    -- ------ --- ---------- ----- ----- -- -------
    -- ------------------------------------------- -
      ----- ---------- - ------------------------------------------------------
      --------------- ---------- ---
    -
  -

  ---------- - --- -- -
    ---------------
    ----- - ---------- - - -----------
    ----- ------ - ---------------------------
    ----- -------- - ------------------ ------------------------
    -------------------- ----------
  --

  ------------ - --- -- -
    ---------------
  --

  ------------ - --- -- -
    ---------------
    ----- - ---- - - --
    ----- - --- ------- - - -----
    ----- - ---------- - - -----------
    ----- ----------------- - -------------------------------- --- ------
    --------------- ----------- ----------------- ---

    -- ---- --- ---- ------------- -- - ---- ------
    ---------------------------------- -----------------------------------
  --

  ---------------- - ---- - ------- - ----- - -- -- -
    ----- - ---------- - - -----------
    ----- ----------------- - --------------------- -- -
      -- -------- --- --- -
        ------ -
          --------
          -------- -
            ----------------
            ----- ------
          --
        --
      -
      ------ -----
    ---

    -- ------ --- ---- -------------
    --------------- ----------- ----------------- ---
  --

  -------- -
    ----- - ---------- - - -----------
    ------ -
      -----
        -----------------------------
          --------------------
          ------------------------
          ----------------------------
          ----------------------------
          -----------------
        --

        -----
          -----------------
          ----------------------------- ----------------- --
        ------
      ------
    --
  -
-

------ ------- ----

结论

使用 react-form-builder-advanced 可以极大地简化表单开发过程,减少冗长的表单组件代码,提高生产率,还允许在表单保存时将其导出为 JSON 配置文件,实现跨系统表单配置。如果您正在进行 React 表单开发,那么此 npm 包是您不可或缺的工具之一。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60066b5351ab1864dac6693d

纠错
反馈