欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[原创]react-vio-form 快速构建React表单应用

程序员文章站 2022-04-13 15:25:21
react vio form 是一个react的快速轻量表单库,能快速实现表单构建。提供自定义表单格式、表单校验、表单信息反馈、表单信息隔离等功能。可采用组件声明或者API的形式来实现表单的功能 " " "demo" react vio form 基于React.createContext实现,要求 ......

react-vio-form 是一个react的快速轻量表单库,能快速实现表单构建。提供自定义表单格式、表单校验、表单信息反馈、表单信息隔离等功能。可采用组件声明或者api的形式来实现表单的功能

[原创]react-vio-form 快速构建React表单应用

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上提吧

thanks

license

mit ©