表单通用组件

快速开始

npm install @sim-design/form --save

参数

| 参数 | 说明 | 类型 | | -------------- | ----------------------------- | --------- | | formId | 表单 id | string | | onOk | 表单回调，返回 key:value 对象 | Function | | FormCheckType | 考核规则。对象字符串 | string | | FormKeys | 正确答案 | string | | FormScores | 得分规则。对象字符串 | string | | FormDataSource | 映射数据源。对象字符串 | string | | showCorrect | 显示对错图标 | Boolean | | dragProps | 拖拽区相关配置项 | dragProps | | dropProps | 放置区相关配置项 | dragProps |

dragProps

| 参数 | 说明 | 类型 | | -------------- | ---------------------- | ------------- | | titleStyle | 面板标题样式 | CSSProperties | | panelStyle | 面板样式 | CSSProperties | | contentStyle | 面板拖拽源父类容器样式 | CSSProperties | | itemWrapStyle | 单个拖拽源容器默认样式 | CSSProperties | | itemStyle | 选项默认样式 | CSSProperties | | itemHoverStyle | 选项默认选中样式 | CSSProperties | | itemDelStyle | 选项被删除时样式 | CSSProperties |

dropProps

| 参数 | 说明 | 类型 | | itemWrapStyle | 单个列表容器默认样式 | CSSProperties | | itemStyle | 单个列表默认样式 | CSSProperties | | itemHoverStyle | 单个列表选中样式 | CSSProperties | | itemDelSrc | 单项删除图片 | string |

panelTitleStyle示例：
{
    fontSize:1rem;
    color:red;
}

panelStyle示例：
{
    background: #fff;
    padding: 10px;
    margin: 20px;
}

Ref 方法实例

你可以通过 ref 获取数据域

| 参数 | 说明 | 类型 | | -------------- | ------------------- | ------ | | getFieldsValue | 获取提交数据 | Object | | getFormScore | 获取表单得分信息 id | Object |

用法示例

import {useState,useRef} from 'react'
import SimForm from "@sim-design/form";

const Demo = (props) => {

    const [showCorrect, setShowCorrect] = useState(false)

    const formRef = useRef()

    // 获取得分和提交记录
    //const values = formRef?.current.getFieldsValue()
    //const values = formRef?.current.getFormScore()

    return <SimForm ref={formRef} formId="123123123" showCorrect={showCorrect} />
}