Formio.js中监听向导表单页面增删事件的技术实践

在Formio.js项目中，当开发者使用向导(Wizard)表单构建器时，经常会遇到需要实时获取表单结构变化的需求。本文将深入探讨如何正确监听向导表单中页面的添加和删除事件，并分享一个实用的解决方案。

问题背景

在构建向导式表单时，开发者通常需要保存表单的schema结构到应用状态中。常见的做法是通过订阅构建器的三个事件来实现：

1. addComponent - 添加组件时触发
2. removeComponent - 删除组件时触发
3. updateComponent - 更新组件时触发

然而，在向导表单中删除页面时，虽然removeComponent事件会被触发，但此时获取的schema仍然包含刚被删除的页面，导致状态不一致。

问题根源

经过分析发现，当删除向导页面时，事件触发的时机存在问题：

1. 首先触发的是Panel组件的removeComponent事件
2. 然后WizardBuilder才会执行实际的页面删除逻辑
3. 因此在事件触发时，schema尚未完全更新

解决方案

最新版本的@formio/react已修复此问题。现在可以使用onDeleteComponent回调函数，它会在向导页面真正被删除后触发，确保获取的schema是最新的。

以下是实现代码示例：

const builderRef = useRef();
const onDeleteComponent = useCallback(() => {
    // 此时可以安全地获取更新后的schema
    const currentSchema = builderRef.current.instance.schema;
    // 处理schema更新逻辑...
}, []);

const onBuilderReady = useCallback((builder) => {
    builderRef.current = builder;
}, []);

return <FormBuilder 
    onBuilderReady={onBuilderReady} 
    onDeleteComponent={onDeleteComponent} 
/>;

技术要点

1. 引用保存：使用useRef保存builder实例，确保在回调中可以访问
2. 事件时机：onDeleteComponent会在页面完全删除后触发
3. 状态一致性：此时获取的schema反映了最新的表单结构

最佳实践

对于需要实时同步表单结构的应用，建议：

1. 始终使用最新版本的Formio.js
2. 优先使用官方提供的专用事件回调
3. 避免过度依赖通用的change事件，以减少不必要的处理
4. 对于复杂表单，考虑添加防抖逻辑优化性能

通过这种方式，开发者可以可靠地监听向导表单的结构变化，确保应用状态与表单构建器保持同步。