[原创]react-vio-form 快速构建React表单应用
react-vio-form 是一个react的快速轻量表单库,能快速实现表单构建。提供自定义表单格式、表单校验、表单信息反馈、表单信息隔离等功能。可采用组件声明或者API的形式来实现表单的功能
react-vio-form 基于React.createContext实现,要求开发者使用React16+的版本
github:地址
安装
npm install --save react-vio-form
快速教程
首先我们先自定义自己的输入框组件
InputGroup.js
import React, { Component } from 'react';
class InputGroup extends Component {
render() {
let {
onChange,//必须使用的属性,表单字段的值改变方法
value,//必须使用的属性,表单字段的值
message,//必须使用的属性,表单字段的报错信息
title,//自定义属性
type="text"//自定义属性
}=this.props;
return (
<div>
<label>{title}:</label>
<input type={type} onChange={e=>onChange(e.target.value)}/>
{message&&<span>{message}</span>}
</div>
);
}
}
export default InputGroup;
接着我们配置我们的表格
- 最外层是Form组件,向它传递一个onSubmit的回调方法,在回调方法内我们输出表单的值。
- 里面是Field组件,它接收我们刚才写的InputGroup为component属性、fieldName为该字段的名称、regexp为该字段的校验正则表达式、message为当表单校验不通过的时候显示的报错信息,该信息通过props传递给InputGroup
- 一个简单列表demo就完成了,当在username或者password输入值或者点击Submit按钮就会触发表单的校验逻辑
App.js
import React, { Component } from 'react';
import InputGroup from './InputGroup';
let requiredExp=/\w{1,}/;
class App extends Component {
handleSubmit=({model})=>{
console.log('form data is :'+JSON.stringify(model));
}
render() {
return (
<Form onSubmit={this.handleSubmit}>
<Field component={InputGroup} fieldName="username" title="Username"
regexp={requiredExp} message="Not be empty"></Field>
<Field component={InputGroup} fieldName="address" title="Address"></Field>
<Field component={InputGroup} fieldName="password" title="Password"
type="password" regexp={requiredExp} message="Not be empty"></Field>
<button type="submit">Submit</button>
</Form>
);
}
}
export default App;
回调函数
<Form onSubmit={//}>
只有表单验证通过了才会触发<Field onChange={//}>
字段每次修改都会触发
class App extends Component {
handleSubmit=({model})=>{
//form submit callback
console.log('form data is :'+JSON.stringify(model));
}
passwordChange=(value,{model,form})=>{
//change callback
//value:该字段的值
//model:为整个表单的数据模型
//form:表单的api中心
console.log(`password:${value}`);
}
render() {
return (
<div>
<Form onSubmit={this.handleSubmit} id="form">
<Field component={InputGroup} fieldName="username" title="Username"></Field>
<Field component={InputGroup} fieldName="password" title="Password"
type="password" onChange={this.passwordChange}></Field>
<button type="submit">Submit</button>
</Form>
</div>
);
}
}
API
表单实例form可以获取设置表单的信息,获取表单实例的方法有两种:
- formManager.get(id)
- 回调函数的参数
表单实例方法:
- setError(fieldName,message)
- clearError(fieldName)
- getModel()
- submit()
import React, { Component } from 'react'
import {Form,Field,formManager} from 'react-vio-form'
let requiredExp=/\w{1,}/;
class App extends Component {
handleSubmit=({model})=>{
//form submit callback
console.log('form data is :'+JSON.stringify(model));
}
handleOutsideSubmit=()=>{
// submit outside Form Component
// param is Form id
formManager.get('form').submit();
}
passwordChange=(value,{model,form})=>{
if(model.password!==model.password2){
//set Error Message
form.setError('password2','password2 must be equaled to password');
}else{
//clear Error Message
form.clearError('password2');
}
}
render() {
return (
<div>
<Form onSubmit={this.handleSubmit} id="form">
<Field component={InputGroup} fieldName="username" title="Username"></Field>
<Field component={InputGroup} fieldName="password" title="Password"
type="password" regexp={requiredExp}
message="Not be empty" onChange={this.passwordChange}></Field>
<Field component={InputGroup} fieldName="password2" title="Password2"
type="password" onChange={this.passwordChange}></Field>
</Form>
<button onClick={this.handleOutsideSubmit}>outside submit</button>
</div>
);
}
}
持续更新中...
反馈与建议
- 直接在github上提issue吧
Thanks
License
MIT © violinux666
[原创]react-vio-form 快速构建React表单应用的更多相关文章
- 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- 【React】使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...
- 快速构建 React 开发环境
使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. cre ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- 基于react hooks,antd4 配置生成表单并自动排列
react后台项目,大多都是表单处理,比如下列4种常见1*n布局 (如果手工编码,大量的Row,Col, Form.Item的嵌套,排列,如果加上联动处理,代码将十分臃肿,不易维护) 一行一列 一行两 ...
- 快速创建InfoPath表单
快速创建InfoPath表单 2010年已经过去了一半了,这时候再说初识InfoPath可能会被很多人笑话,但是又有多少人真正认识InfoPath呢?无论你是刚刚 听说这个东西还是它的老相好都请同我一 ...
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- 在一般处理程序中,把Form Post过来的表单集合转换成对象 ,仿 MVC post,反射原理
using System; using System.Collections.Generic; using System.Collections.Specialized; using System.L ...
- 10天学会phpWeChat——第八天:Form类,丰富表单提交的字段类型
通过前面七讲的系列教程,我们完成了一个包含后台并自适应PC+h5移动端的文章管理模块. 在实际的生产环境中,文章投稿.商品上传等操作并不会简单局限于一个text和textarea组成的表单.在实际中, ...
随机推荐
- Windows cannot find ". Make sure you typed the name correctly, and then try again
https://answers.microsoft.com/en-us/windows/forum/windows_10-desktop/windows-10-explorerexe-error-wi ...
- js插件---瀑布流Masonry
js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...
- org.mybatis.spring.mapper.MapperScannerConfigurer$Scanner$1
不能加载或找不到 org.mybatis.spring.mapper.MapperScannerConfigurer$Scanner$1 经查证,是mybatis-spring-xxx.jar 这个版 ...
- Tensorflow 学习笔记 -----tf.where
TensorFlow函数:tf.where 在之前版本对应函数tf.select 官方解释: tf.where(input, name=None)` Returns locations of true ...
- jQuery判断字符串是否含有中文字符
//判断字符串是不是中文String.prototype.isChinese = function () { var reg = /[^\x00-\xff]/ig;//判断是否存在中文和全角字符 ...
- 【Henu ACM Round#17 D】Hexagons!
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 题目的图吓人. 找下规律就会发现从内到外是1,6,12,18 即1,16,26,36... 即1+6(1+2+3+...) 等差求和 ...
- 洛谷 P3913 车的攻击
P3913 车的攻击 题目描述 N \times NN×N 的国际象棋棋盘上有KK 个车,第ii个车位于第R_iRi行,第C_iCi 列.求至少被一个车攻击的格子数量. 车可以攻击所有同一行或者同 ...
- Android.mk脚本推断文件是否存在
Android.mk 推断文件是否存在,若存在则复制该文件到某个文件夹 $(shell test -f [文件] && echo yes)的值假设是yes, 则文件存在,然后进行she ...
- js---08函数 定时器
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- amaze ui表格斑马纹效果
amaze ui表格斑马纹效果 需要注意的是样式的写法,都是 am-table- ,很好记的 如果是条纹就是striped,如果是hover状态就是hover 用法很简单,点对应class,不同的cl ...