xrender中的FormRender使用示例

xrender是阿里的中后台「表单/表格/图表」开箱即用解决方案。

先采用在线工具创建一个简单的schema:simple.ts

export default {
    "type": "object",
    "properties": {
        "title": {
            "title": "标题",
            "type": "string",
            "props": {
                "placeholder": "标题"
            },
            "required": true,
            "message": {
                "required": "请输入标题"
            },
            "min": 10,
            "maxWidth": "340px",
            "widget": "input"
        },
        "type": {
            "title": "类型",
            "type": "string",
            "props": {
                "options": [
                    {
                        "label": "专科",
                        "value": "专科"
                    },
                    {
                        "label": "本科",
                        "value": "本科"
                    },
                    {
                        "label": "硕士",
                        "value": "硕士"
                    },
                    {
                        "label": "博士",
                        "value": "博士"
                    }
                ]
            },
            "defaultValue": {
                "type": "本科"
            },
            "maxWidth": "340px",
            "widget": "radio"
        }
    },
    "displayType": "row"
}

App.tsx:

import { message } from "antd";
import FormRender, { useForm } from "form-render";
import schema from "./simple";

export default () => {
	const form = useForm();

	const onFinish = (data) => {
		message.info(JSON.stringify(data));
	};

	return (
		<FormRender
			form={form}
			schema={schema}
			onFinish={onFinish}
			footer={true}
			maxWidth={360}
		/>
	);
};