Skip to main content

Formik

React 中构建表单时所用的库。

可以做以下 3 件事:

  1. 在 Form 的内外都可获取 Form 的 State
  2. 在验证表单时管理错误信息
  3. 处理 Form 的提交操作

主要组件有如下:

  • <Formik /> ○ 构建整个表单的顶层组件,通过自身的 state 维护表单状态(2.0 版本采用 useReducer 维护),收集表单字段,执行校验和提交表单等操作,通过 render 函数或者 children 的方式往下传递 props,使得子组件具备完全访问和控制表单状态的能力;
  • <Form /> ○ 是对 <form />标签的简单封装,监听了 form 的 onReset 和 onSubmit 事件;
  • <Field /> ○ 通过指定 name 属性与 formik 表单状态中具体某个字段建立「同步关系」,这个组件帮我们省去了很多对受控组件的更新操作,如 onChange、onBlur 事件的监听和回调处理。<Field /> 组件默认渲染为一个 input,同时也可以通过 render 属性或者 children 的方式渲染自己的字段组件,如 select,checkbox,textarea 等。
  • <FieldArray /> ○ 这个组件可以对一个数组字段进行维护,通过其提供的 props 方法中的 insert 或者 remove 可以方便的增删表单中的某个数组字段里的元素,在进行动态控制表单字段方面很方便,具体示例可以参考后面的多语言输入框的实现。

参考