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}
		/>
	);
};