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