react-vio-form 快速構建React表單應用

時間 2019-11-07

標籤 react vio form 快速構建表單應用欄目 React 简体版

原文原文鏈接

react-vio-form 是一個react的快速輕量表單庫，能快速實現表單構建。提供自定義表單格式、表單校驗、表單信息反饋、表單信息隔離等功能。可採用組件聲明或者API的形式來實現表單的功能react

demolinux

react-vio-form 基於React.createContext實現，要求開發者使用React16+的版本git

github:地址github

安裝

npm install --save react-vio-form
複製代碼

快速教程

首先咱們先自定義本身的輸入框組件正則表達式

InputGroup.jsnpm

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; 複製代碼

接着咱們配置咱們的表格api

最外層是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能夠獲取設置表單的信息，獲取表單實例的方法有兩種：bash

formManager.get(id)
回調函數的參數

表單實例方法：ide

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>
        );
    }
}
複製代碼