TypeScript驱动的React无表单数据模型
react-formless是一个强大的React表单库,采用TypeScript高级类型自动生成表单。即使是复杂的表单数据结构(通过类型和架构定义),也可以通过该库轻松生成,让开发者可以专注于数据结构本身。要安装react-formless,请运行npm i @react-formless/core @react-formless/utils。查看以下简单的表单示例,了解更多详细信息,或访问线上版本以查看更复杂的示例。
import * as React from "react";
import { FormView, useFormHook, FormSchema } from "@react-formless/core";
import { validNumber } from "@react-formless/utils";
export type User = {
name: string;
age: number;
email: string;
};
export const schema: FormSchema = {
name: {
type: "string",
validators: [],
},
age: {
type: "number",
validators: [validNumber()],
},
email: {
type: "string",
validators: [],
},
};
const Form = () => {
const [form] = useFormHook(schema);
return (
<input name="name" placeholder="Name" type="text"/>
<input name="age" placeholder="Age" type="number"/>
<input name="email" placeholder="Email" type="email"/>
<button type="submit">Submit</button>
);
};
export default Form;
1.21MB
文件大小:
评论区