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;
zip 文件大小:1.21MB