首页 > 其他分享 >xrender中的FormRender使用示例

xrender中的FormRender使用示例

时间:2024-08-11 17:17:01浏览次数:13  
标签:示例 value xrender FormRender import message label type

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

标签:示例,value,xrender,FormRender,import,message,label,type
From: https://www.cnblogs.com/soarowl/p/18353633

相关文章

  • 通过示例了解 .NET Core 中的依赖注入
    依赖注入(DI)是一种用于实现IoC(控制反转)的设计模式,可以更好地解耦应用程序内的依赖关系并更轻松地管理它们。.NETCore内置了对依赖注入的支持,提供了一种有效管理依赖关系的强大方法。一.什么是依赖注入?依赖注入是一种技术,其中一个对象提供另一个对象的依赖项。“依赖......
  • 项目管理工具Maven的简单配置示例
    Maven是一个强大的项目管理工具,它基于项目对象模型(POM)的概念,通过一小段描述信息来管理项目的构建、报告和文档。以下是一些关于Maven的具体例子,涵盖了项目配置、依赖管理、插件使用等方面:1.Maven项目基础配置Maven项目的基础配置通常体现在pom.xml文件中,该文件是Maven项目的核......
  • Node.JS - 基础(示例代码)
    目录A.Hello1.创建js文件2.编写代码3.编译4.输出结果B.建立HTTP服务器C. 异步式I/O与事件式编程D.模块和包E.调试A.Hello1.创建js文件使用VSCode创建一个.js文件,比如2.编写代码打印logconsole.log("Hello");3.编译4.输出结果B.建立HTTP服务......
  • 【AI大模型】LangChain框架:示例选择器与输出解析器携手,编织NLP高效精准之网
    文章目录前言一、示例选择器1.介绍及应用2.自定义示例选择器案例:AI点评姓名3.基于长度的示例选择器案例:对输入内容取反4.基于最大边际相关性(MMR)的示例选择器案例:得到输入的反义词5.基于n-gram重叠的示例选择器6.综合案例二、输出解析器1.介绍2.列表解析器3.日期......
  • radix-ui/themes使用示例
    [email protected]:<!doctypehtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><linkrel="icon"type="image/svg+xml"href="/vite.svg"/><m......
  • react-ace使用示例
    import{useState}from"react";importAceEditorfrom"react-ace";import"ace-builds/src-noconflict/mode-markdown";import"ace-builds/src-noconflict/ext-language_tools";importMarkdownfrom"react-markdown......
  • Python多种接口请求方式示例
    发送JSON数据如果你需要发送JSON数据,可以使用json参数。这会自动设置Content-Type为application/json。importrequestsimportjsonurl='http://example.com/api/endpoint'data={"key":"value","another_key":"another_value"......
  • ASP.NET CORE微信支付回调示例代码
    ASP.NETCORE微信支付回调示例代码 ///<summary>///接收微信支付异步通知///</summary>///<returns></returns>publicasyncTask<ActionResult>NotifyUrl(){//读取请求体中的数据/*......
  • PHP Laravel 5.2 HTTP控制器Controller介绍及示例
    在Laravel5.2中,HTTP控制器是用于处理HTTP请求的主要组件。控制器可以封装业务逻辑,并且可以使你的应用程序更加模块化和易于维护。下面我将详细介绍Laravel5.2中HTTP控制器的基本概念,并提供一些示例。创建控制器在Laravel5.2中,你可以使用Artisan命令来生成......
  • Python使用Memcached示例
    关注我,持续分享逻辑思维&管理思维&面试题;可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导;推荐专栏《10天学会使用asp.net编程AI大模型》,目前已完成所有内容。一顿烧烤不到的费用,让人能紧跟时代的浪潮。从普通网站,到公众号、小程序,再到AI大模型网站。干货满满。学成后可......