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;
接着我们配置我们的表格
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> ); } }
表单实例form可以获取设置表单的信息,获取表单实例的方法有两种:
表单实例方法:
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> ); } }
持续更新中...
mit ©
如对本文有疑问, 点击进行留言回复!!
Agora 开源 | 一个 Demo,帮你快速实现社交直播四大场景
vuejs (2)- Vue 生命周期 和 VueJS ajax
网友评论