informed：实践指南

面对实际交付，我看informed的重点不在星标，而在这项能力：用于在 React 应用程序中构建强大表单的轻量级框架和实用程序。把它放到界面与前端开发流程中，最容易暴露的是视觉还原、交互状态和响应式细节容易遗漏，不能只看演示是否顺利。先选一个包含多状态的真实组件完成实现更稳妥；过程中要观察尺寸、状态、可访问性、资源和不同视口表现，失败也应能解释原因。整体来看，它适合愿意逐状态验收界面质量的前端团队拿来做对照测试，最终决定仍应回到真实结果和维护状态。

消息灵通

简介

向您使用过的最好的 React 表单库问好！ Informed 是一个广泛、简单且高效的解决方案，用于在 React 中创建基本到复杂的表单。开箱即用，您可以获取和操作值、验证字段、创建自定义输入、多步骤表单、数组字段等等！

哦还有YES WE USE HOOKS！

开始使用

使用 npm 安装

npm install --save informed

实例/文档

它能做什么？

你自己看看吧。

默认情况下，它带有由 inform 控制的本机 dom 输入。

import { Form, Input, Select, Checkbox, Relevant, Debug } from 'informed';

const onSubmit = ({ values }) => console.log(values);

const ExampleForm = () => (
  <Form onSubmit={onSubmit}>
    <Input name="name" label="Name" placeholder="Elon" />
    <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 value="ms">Model S</option>
      <option value="m3">Model 3</option>
      <option value="mx">Model X</option>
      <option value="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 />
  </Form>
);

功能列表

informed 旨在支持许多重要功能

• 数组：能够渲染动态字段数组 ['a', 'b' ] 或 [{ name: 'Joe', age: 29 }, { name: 'Hope', age: 24 }]
• 相关性：能够根据表单其他部分的状态有条件地渲染渲染字段
• JSPAN：能够轻松直观地操纵表单状态
• 格式化：执行显示格式化的能力，其中向用户显示的格式可能与存储的值的状态不同
• 验证：能够以受控方式执行同步和异步验证
• Api：能够在表单上下文内部和外部操作表单状态
• 状态：访问字段和表单数据的能力
• 多步骤：创建动态多步骤表单的能力
• 范围：范围（组）字段的能力
• 模式：能够基于纯 JSON 模式呈现表单
• 动态：能够隐藏和显示字段（渲染和取消渲染）以及清理或维护未安装字段的状态
• 调试：能够轻松调试用户状态以及库的内部结构
• 嵌套：能够具有高度嵌套的值结构 state.values.friends[1].brother.parents.cars[0].model

创建你自己的领域

但是如果您不想要开箱即用的东西怎么办？

没问题，请看下面的例子！

import { useForm, useField, Relevant, FormState } from 'informed';

// Step 1. Build your form component ---------------------

const Form = ({ children, ...rest }) => {
  const { formController, render, userProps } = useForm(rest);

  return render(
    <form noValidate {...userProps} onSubmit={formController.submitForm}>
      {children}
    </form>
  );
};

// Step 2. Build your input components --------------------

const Input = props => {
  const { render, informed, userProps, ref } = useField({
    type: 'text',
    ...props
  });
  const { label, id, ...rest } = userProps;
  return render(
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} ref={ref} {...informed} {...rest} />
    </>
  );
};

const Checkbox = props => {
  const { render, informed, userProps, ref } = useField({
    type: 'checkbox',
    ...props
  });
  const { label, id, ...rest } = userProps;
  return render(
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} ref={ref} {...informed} {...rest} />
    </>
  );
};

const ErrorInput = props => {
  const { render, informed, userProps, fieldState, ref } = useField({
    type: 'text',
    ...props
  });
  const { label, id, ...rest } = userProps;
  const { showError } = fieldState;
  const style = showError ? { border: 'solid 1px red' } : null;
  return render(
    <>
      <label htmlFor={id}>{label}</label>
      <input id={id} ref={ref} {...informed} {...rest} style={style} />
      {showError && <small style={{ color: 'red' }}>{fieldState.error}</small>}
    </>
  );
};

const Select = props => {
  const { render, informed, userProps, ref } = useField({
    type: 'select',
    ...props
  });
  const { label, id, children, ...rest } = userProps;
  return render(
    <>
      <label htmlFor={id}>{label}</label>
      <select id={id} ref={ref} {...informed} {...rest}>
        {children}
      </select>
    </>
  );
};

// Step 3. Build your forms! ---------------------------

const onSubmit = ({ values }) => console.log(values);

const ExampleForm = () => (
  <Form onSubmit={onSubmit}>
    <Input name="name" label="Name" placeholder="Elon" />
    <ErrorInput name="age" type="number" label="Age" required="Age Required" />
    <Input name="phone" label="Phone" formatter="+1 (###)-###-####" />
    <Select name="car" label="Car" initialValue="ms">
      <option value="ms">Model S</option>
      <option value="m3">Model 3</option>
      <option value="mx">Model X</option>
      <option value="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 />
  </Form>
);