dudy-form v2.0.3

用DUDY-FORM写属于自己的组件库

在React/React Native开发中，因为业务+表现形式不同，大家经常遇到需要封装自己表单库的情况。 dudy-form提供了一套封装表单库的接口，方便大家封装自己的表单库组件。

install

npm i dudy-form  --save

写一个自己的表单组件

class Text extends Component {
  componentDidMount(){
    
    this.refs['ipt'].value = this.props.value || ""
  }

  _change = (evt) => {

    this.props.onChange && this.props.onChange(evt.target.value)

  }

  render() {

    const {label} = this.props

    return <div>
      <label>{label}</label>
      <input ref='ipt' type="text" onChange={this._change} />
    </div>
  }
}

在dudy-form中注册自己的表单组件

import {inject_field_type} from 'dudy-form'
inject_field_type("Text", Text)

简单表单

使用表单，先使用createForm方法创建，然后从form中取出Field。 Field的type类型就是之前注册的组件名称。

import {createForm} from 'dudy-form'

// 创建表单
const form = createForm({name : "Test"})

// 从表单中获取Field组件
const Field = form.Field


// 使用示例
export default class Test extends Component{


  _submit = () => {

    const errors = form.validation()

    if(errors > 0) {
      /// 处理错误
      return
    }

    // 收集数据
    const data = form.getData()

    console.log(data)
  }

  render(){
    return <div>
      <Field name='user_name' 
        type="Text" 
        label='用户名' 
        validation={{required : true, required_error : "请输入用户名"}}
      />
      <Field name='password' type="Text" label='密码' 
      />

      <button onClick={this._submit}>submit</button>
    </div>
  }
}

表单嵌套问题

dudy-form通过path属性来解决表单嵌套的问题，通过设置Field的属性path。 path也可以是一个数组，这样一个值就会出现在两个表单。

export default class Test extends Component{


  _submit = () => {

    const errors = form.validation()

    if(errors > 0) {
      /// 处理错误
      return
    }

    // 收集数据
    const data = form.getData()

    console.log(data)
  }

  render(){
    return <div>
      <Field name='user_name' 
        path="formA.user_name"
        type="Text" 
        label='用户名' 
        validation={{required : true, required_error : "请输入用户名"}}
      />
      <Field 
        path="formB.passowrd"
        name='password' type="Text" label='密码' 
      />

      <button onClick={this._submit}>submit</button>
    </div>
  }
}

最终收集的数据类似:

data = {
  formA : {
    user_name : ...
  },
  formB : {
    password : ...
  }
}

注册自己的验证规则

自定义一个简单的验证规则

import {reg_validation_rule} from 'dudy-form'

reg_validation_rule('my-rule1', function(value){
  /// 进行验证 return true/false
})

定义异步验证规则

import {reg_validation_rule} from 'dudy-form'

reg_validation_rule('my-rule1', async function(value){
  /// 这里进行远程请求
})

多个验证规则

validation.rules定义多个验证规则

<Field ... validation={{
    required : true, 
    required_error : "请输入...",
    rules : [{
      type : "my-rule1",
      error : "自定义错误文案",
    }, {
      type : "my-rule2",
      error : "自定义错误文案2"
    }]
  }}