使用react-formutil处理表单难题

作为一开始的angular用户,在切换到react的一年多时间里,唯一不能适应的,就是表单在react中处理实在是麻烦。angular得益于其双向数据绑定的实现,再加上ngModel的魔法,angular抽象出的ng-model模型,处理起表单来简直不要太畅快!(angularjs最早就是为处理表单诞生的)

然而在react中,并没有为表单提供特别优化过的处理方法。在官方示例中,无论是受控(controlled)还是非受控(uncontrolled)表单组件,都还需要自己去绑定相关事件来实现数据获取、同步、存储。由于react的单项数据流的特性,表单数据的收集需要做状态提升到父辈组件中去维护,或者放到外部状态管理中。大致来说,有以下几种做法:

  • 提升到最近的父组件中,父组件给子组件传递一组同步方法与状态
  • 使用高阶组件,提升到高阶组件中去
  • 使用context特性,任意父辈组件都可以
  • 提升到外部状态管理库中(redux、mobx等)

于是,当我们以react + form为关键词去搜索,你能搜到一堆的表单处理库,比如ant.design的Form、rc-form、mobx-react-form、redux-form。然后,当你仔细看看他们的文档与示例,不由得得感叹一句:这他妈的都什么玩意儿~

随便看几个官方的代码示例:

ant design
rc-form

这些代码看的人一脸懵逼,尤其是ant-design的,那一堆的 大括号、方括号、圆括号,简直看迷了眼。而且本来好好的jsx,标签声明式写法,硬是被搞成了函数、json配置式。

还有个问题是,这些form组件库对表单的抽象层次不够,有的还停留在争执到底是在onchange、onfocus还是onblur才去做数据校验。作为angular用户,始终觉得angular对表单的抽象模型是最科学的:

  • 表单项具有$diry/$pristine、$touched/$untouched、$valid/$invalid、$error等状态,各种信息的展示可以根据各种状态去渲染。
  • 表单项值具有viewValue和modelValue的概念,并且有相互转换的parser和formatter。
  • 整个表单也有$diry/$pristine、$touched/$untouched、$valid/$invalid、$error这些状态,基于对所属该表单所有项目的状态的收集
  • 表单校验validators和asyncvalidators的方便扩展

angular中,所有的都是状态,表单项的值也只是状态的一部分,view只是根据状态去渲染出dom即可。react的表单处理如果也有类似的处理该多好。刚接触react的时候,我写过一个处理表单的库react-easyform,但是当时队react的理解不够,采用的是非受控组件实现,使用中有诸多不便。近期,终于下决心重新撸了一个

它主要具有以下特性:

  • 一切都是状态,$value、$diry/$pristine、$touched/$untouched、$valid/$invalid、$error等都是状态
  • 非侵入性,只提供了对表单状态收集的抽象接口,不渲染任何dom结构
  • 采用受控组件和context,对组件嵌套层级没有限制,支持数据双向同步(model-view、view-model)
  • 支持高阶组件和函数式子组件(function as child)式调用,更灵活
  • 具备灵活的表单校验方式,支持同步和异步校验
  • 规范的jsx语法调用,更符合react使用

查看demo  

更多信息欢迎移步github:

 

只有一条评论,快抢板凳啦!

发表评论 取消回复