用Quill Forms创建自定义问题类型：registerBlockType快速开发指南

用Quill Forms创建自定义问题类型registerBlockType快速开发指南【免费下载链接】quillformsOpen Source TypeForm Alternative Based on React JS and Typescript | Best Typeform Clone | Conversational Multi Step Form项目地址: https://gitcode.com/gh_mirrors/qu/quillformsQuill Forms 是一款基于 React JS 和 TypeScript 的开源 TypeForm 替代品主打对话式多步骤表单。本文将带你用registerBlockType一步步创建自定义问题类型让你的表单拥有独一无二的交互体验 ✨Quill Forms 中的每个问题无论是短文本、下拉框还是评分滑块都叫作Block区块。内置的 12 种区块welcome-screen、short-text、multiple-choice、number 等覆盖了绝大多数场景但当你的业务需要特殊的交互——比如地址选择器、问卷评分、签名画板——就可以用registerBlockType注册一个属于自己的区块类型。为什么需要自定义问题类型内置区块再丰富也很难覆盖所有创意。借助 Quill Forms 的区块注册机制你可以深度定制交互渲染任意 React 组件作为答题界面️接入专属属性为区块定义自己的 attributes例如 min/max、choices融入表单体系自动获得必填校验、逻辑跳转、主题配色、进度条等能力核心源码位置注册逻辑在packages/blocks/src/api/registration.ts类型定义在packages/blocks/src/types.ts官方中文路径文档见react-docs/create-your-own-custom-block-type.md。快速搭建开发环境只需两步即可在你的 React 应用中使用 Quill Forms 渲染器并注册自定义区块 第 1 步安装核心包npm install quillforms/renderer-core --save npm install quillforms/react-renderer-utils --save npm install quillforms/blocks --save第 2 步注册核心区块并挂载表单import { Form } from quillforms/renderer-core; import quillforms/renderer-core/build-style/style.css; import { registerCoreBlocks } from quillforms/react-renderer-utils; registerCoreBlocks(); // 注册全部内置区块之后你的表单就可以用Form formObj{{ blocks: [...] }} /渲染了每个 block 通过name字段引用已注册的区块类型。registerBlockType 三步注册法registerBlockType由quillforms/blocks包导出签名很简单registerBlockType(name, settings)。下面用一个数字评分区块完整演示 第一步声明 supports区块能力supports决定了区块能自动继承哪些表单能力。Quill Forms 会先用默认值见getDefaultBlockSupports()填充再合并你的配置字段含义editable该区块是否有答案required是否支持必填description/attachment是否支持描述文字 / 配图placeholder/defaultValue是否支持占位符 / 默认值logic/logicConditions是否支持逻辑跳转与条件numeric/choices/payments数值、选项、支付类能力第二步定义 attributes自定义属性在声明supports之后为区块补充你自己的属性。框架还会自动注入一批通用属性label、required、description、placement 等你只写增量部分import { registerBlockType } from quillforms/blocks; registerBlockType(custom-quiz-rate, { supports: { editable: true, required: true, placeholder: true, }, // 你的自定义属性支持 type default attributes: { min: { type: number, default: 1 }, max: { type: number, default: 10 }, }, // 第三步在这里 display: (props) { /* React 组件 */ }, });第三步编写 display 组件答题界面display是渲染端的核心——一个接收上下文 props 的 React 函数组件。这是 Quill Forms 与渲染器对话的唯一通道display: ({ id, attributes, val, setVal, setIsAnswered, showNextBtn, setIsValid, setValidationErr, showErrMsg, blockWithError }) { const { required, min, max } attributes; return ( input typenumber min{min} max{max} value{val || } onChange{(e) { const value e.target.value; if (isNaN(value)) { blockWithError(Numbers only!); // 立即拦截非法输入 return; } setVal(parseInt(value)); showErrMsg(false); if (value) { setIsAnswered(true); showNextBtn(true); setIsValid(true); setValidationErr(null); } else { setIsAnswered(false); showNextBtn(false); if (required) { setIsValid(false); setValidationErr(The field is required!); } } }} / ); }display 组件参数速查表参数类型作用idstring区块在表单中的唯一 IDattributesobject所有属性含框架自动注入的val/setValany / fn当前答案的读/写setIsAnsweredfn标记是否已作答showNextBtnfn控制下一步按钮显隐setIsValid/setValidationErrfn校验状态与错误文案blockWithError/showErrMsgfn即时报错 / 收起错误 小技巧错误提示文案建议通过useMessages()Hook 获取如messages[label.errorAlert.number]这样能跟随表单的语言设置内置 Number 区块就是这么做参考packages/blocklib-number-block/src/renderer/display.js。让它出现在管理端admin settings如果你的区块还需要在Quill Forms 编辑器WordPress 端中可拖拽使用在 settings 里再补上管理端配置即可registerBlockType(custom-quiz-rate, { // ...上面已有的字段 title: 评分题, // 编辑器中显示的区块名称 color: #127fa9, // 主题色 icon: MyIcon, // 区块图标React 组件 controls: MyControls, // 编辑器右侧的属性控制面板 logicControl: MyLogic, // 逻辑条件编辑器 order: 4, // 在区块列表中的排序 entryDetails: MyDetail, // 答卷详情中的自定义展示 // 支持逻辑跳转的运算符 logicalOperators: [is, is_not, greater_than, lower_than], });其中controls是一个接收{ id, attributes, setAttributes }的组件可以直接复用quillforms/admin-components提供的BaseControl、ToggleControl、TextControl等现成控件packages/blocklib-number-block/src/admin/controls.js是一个很好的参照。进阶主题适配与条件逻辑在 renderer 设置里还有几个可选字段能让自定义区块更原生mergeTag自定义 merge tag 的渲染方式用于通知邮件等场景nextBtn替换默认的下一步按钮getNumericVal告诉框架如何从答案中取数值评分、计算类区块需要isConditionFulfilled实现逻辑跳转时自定义条件判断配置好logicalOperators后你的区块就能参与如果答案大于 5 则跳转到第 X 题这类条件逻辑完整接入 Quill Forms 的对话式流程。更多细节如跳转控制beforeGoingNext、渲染端 Store Actions可阅读仓库内的开发者文档目录react-docs/例如react-docs/beforeGoingNext.md与react-docs/use-renderer-store-actions.md。总结用 Quill Forms 的registerBlockType创建自定义问题类型核心就是声明 supports → 定义 attributes → 编写 display 组件这三步。写一个 React 组件就能获得一个完整融入多步骤表单体系的自定义题型——校验、跳转、主题、管理端面板统统开箱即用。动手建议先照着内置 Number 区块的目录结构packages/blocklib-number-block/抄一份再替换成你的业务交互是上手最快的路径 【免费下载链接】quillformsOpen Source TypeForm Alternative Based on React JS and Typescript | Best Typeform Clone | Conversational Multi Step Form项目地址: https://gitcode.com/gh_mirrors/qu/quillforms创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考