React使用Ant Design Mobile结合rc-form进行表单验证

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React使用Ant Design Mobile结合rc-form进行表单验证相关的知识,希望对你有一定的参考价值。

参考技术A

rc-form是什么:

在使用Ant Design Mobile的InputItem文本输入时提示"受控组件建议使用rc-form",那么这个rc-from究竟是什么呢?

答:rc-form是一个将输入框变为受控组件的库,也是一个React的高阶form组件。它集合了对于输入框的各种方法,可以使我们方便的控制输入框的状态。

使用方法

首先安装并导入rc-form库引入createForm方法,然后使用createForm()在组件\'CountSet\'上挂载form对象,即在当前组件的props上挂在了form,通过使用props.form.相关方法,即可调用rc-form中定义的方法。

API:

validateFields( [fieldNames: string[]] ,[options: object],*callback(errors, values)******) => void *****校验并获取一组输入域的值与 Error,若 fieldNames 参数为空,则校验全部组件。

getFieldsValue( [fieldNames: string[]]* ) 获取一组控件的值,若 fieldNames 参数为空,则获取全部组件。*

getFieldsError( [names: string[]]* ) 获取一组输入控件的 Error ,如不传入参数,则获取全部组件的 Error。*

getFieldProps( name,options ) 用于为控件绑定名称(key),及控件的一些默认配置。其中options参数简单说两个 initialValue和 rules,initialValue是控件的默认初始值绑定在name上;rules是对输入框的内容做一些限制,比如是否必须输入(require),最大(max)最小(min)长度等,也可以自定义限制(validator:function(rule, value, callback))。

一个例子:

react-native实践(基于antd-mobile)

react-native项目简单搭建:

参照 https://github.com/ant-design/antd-mobile-samples/tree/1.x/create-react-native-app

说明:需要安装 node、npm、yarn...

每一步ant官网介绍很清晰

搭建项目过程之中可能需要注意的是: 

  1.  yarn add antd-mobile --save 出现报错:error An unexpected error occurred: "EPERM: operation not permitted, unlink....

     类似operation not permitte的错误,可以使用管理员权限打开dos,重新安装 ant-mobile

  2.  启动项目的时候,可以直接链接自己的移动设备,需要开启 USB调试模式;模拟器用起来感觉很卡了,不知道是我的配置问题还是什么原因

  3. 启动项目较慢,会在模拟器上面安装一个app:Expo ,还挺好用的,需要等待react把文件编译好即可预览,每一次修改都会在手机通知栏里面通知你刷新项目,重新预览修改后的界面。

暂时没有其他的需要介绍了,可能开发过程中有的时候需要用到 ndk 

  NDK:https://developer.android.google.cn/ndk/index.html

以上是关于React使用Ant Design Mobile结合rc-form进行表单验证的主要内容,如果未能解决你的问题,请参考以下文章

如何利用Facebook的create-react-app脚手架创建一个基于ant design mobile的项目

umi + dva + ant-design-mobile快速搭建H5项目

react-native实践(基于antd-mobile)

Ant Design Mobile 覆盖默认的样式。

2019.06.22 React如何自定义antd-mobile样式

React开发(169):ant design Popconfirm 使用