多表单联动

当一页面存在多个 drip-form 表单时，如何控制多个 drip-form 表单之间的联动？

如上图所示，存在两个 drip-form 构建的表单（表单 1 和表单 2）。当表单 1 的输入是123的时候，表单 2 的开关按钮会被关闭

多表单联动实现步骤

通过 ref 获取到表单的dispatch
dispatch函数可修改表单内部的 ui、校验、数据，具体请查看dispatch 函数
对 ref 获取dispatch有疑问的先查看错误于状态捕获
通过control prop控制表单联动
对 control prop 有疑问，先查看联动-control 全局控制
通过ref.current.dispatch和control prop的配合既可以做到任意 drip-form 表单之间的联动控制。

代码实现

代码实现
import React, { useRef, useCallback, Fragment } from 'react'
import DripForm from '@jdfed/drip-form'
import dripTheme from '@jdfed/drip-form-theme-antd'
import '@jdfed/drip-form/dist/index.css'
import '@jdfed/drip-form-theme-antd/dist/index.css'

//表单1的unitedSchema
const unitedSchemaMulti = {
    validateTime: 'change',
    type: 'object',
    theme: 'drip-theme',
    schema: [
        {
            fieldKey: 'text2',
            title: '表单1:输入框',
            type: 'string',
            transform: ['trim'],
            ui: {
                type: 'text',
                placeholder: '当输入123，表单2开关关闭',
                description: {
                    type: 'icon',
                    title: '表单1',
                    trigger: 'hover',
                },
            },
        },
    ],
}

//表单2的unitedSchema
const unitedSchema = {
    validateTime: 'change',
    type: 'object',
    theme: 'drip-theme',
    schema: [
        {
            fieldKey: 'switch1',
            title: '表单2:开关',
            type: 'boolean',
            default: true,
            ui: {
                type: 'switch',
                disabled: false,
            },
        },
    ],
}

const DripForm1 = memo(() => {
    const ref = useRef(null)
    const controlFn = useCallback(({ formData }) => {
        //当表单1的name字段是123的时候。获取
        if (formData.name === '123') {
            ref.current.dispatch({
                type: 'setData',
                action: {
                    set: {
                        switch: false,
                    },
                },
            })
        } else {
            ref.current.dispatch({
                type: 'setData',
                action: {
                    set: {
                        switch: true,
                    },
                },
            })
        }
    }, [])

    return (
        <Fragment>
            <DripForm>
                ref={ref}
                unitedSchema={unitedSchemaMulti}
                uiComponents={{ 'drip-theme': dripTheme }}
            </DripForm>
            <DripForm>
                unitedSchema={unitedSchema}
                uiComponents={{ 'drip-theme': dripTheme }}
                control={controlFn}
            </DripForm>
        </Fragment>
    )
})

多表单联动实现步骤​

代码实现​

多表单联动实现步骤

代码实现