Informed —— 特斯拉开源轻量级 React 表单构建框架

Informed 是用于在 React 应用程序中构建表单的轻量级框架，开箱即用，支持获取和操作值、验证字段、创建自定义输入、多步骤表单、数组字段等。

示例

 // Example.jsx import { Relevant, Debug } from 'informed'; // Inputs that were hooked up to informed via "useField" import { Form, Input, Select, Checkbox, Option, Button } from 'YourComponents'; const onSubmit = ({ values }) => window.alert(`Hello ${values.name}`); const Example = () => ( <Form onSubmit={onSubmit} initialValues={{ phone: '1234567899' }}> <Input name="name" label="Name" placeholder="Elon" required /> <Input name="age" type="number" label="Age" required="Age Required" /> <Input name="phone" label="Phone" formatter="+1 (###)-###-####" /> <Select name="car" label="Car" initialValue="ms"> <Option key="ms">Model S</Option> <Option key="m3">Model 3</Option> <Option key="mx">Model X</Option> <Option key="my">Model Y</Option> </Select> <Checkbox name="married" label="Married?" /> <Relevant when={({ formState }) => formState.values.married}> <Input name="spouse" label="Spouse" /> </Relevant> <Button type="submit">Submit</Button> <Debug valid pristine dirty values errors /> </Form> ); export default Example;