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;