welife-kit v1.0.19

Taro+React实现的多端组件库

组件介绍

WeForm

简单的表单验证组件，将组件内用户输入的 input、textarea、uploader、picker 等提交，需要和 Wefield 组合使用

示例代码

import React, { Component } from 'react';
import { View, Button } from '@tarojs/components';
import { WeInput, WeForm, WePicker, WeField } from 'welife-kit';
import './index.scss';

export default class Index extends Component {
  state = {
    selector: [
      { value: '海珠区', name: '海珠区' },
      { value: '天河区', name: '天河区' },
    ],
    formData: {
      name: '',
      dicts: 1,
    },
    rules: {
      name: [
        { required: true, message: '请输入姓名' },
        { patten: /[\u4E00-\u9FA5]+/, message: '请输入正确的姓名' },
      ],
      code: [
        { required: true, message: '请输入验证码' },
        { custom: this.codeLength, message: '请输入4位验证码' },
      ],
      dicts: [{ required: true, message: '请选择区县' }],
    },
  };

  formRefs = null;

  codeLength(value) {
    return value.length === 4;
  }

  onSubmit(event) {
    //点击提交后获取表单输入数据
    console.log(event);
  }

  handleClickSubmit() {
    //使用ref
    const current = this.formRefs;
    current &&
      current.submit().then((res) => {
        //表单输入数据
        console.log(res);
      });
  }

  render() {
    const { selector, rules, formData } = this.state;
    return (
      <WeForm rules={rules} data={formData} ref={(refs) => (this.formRefs = refs)} onSubmit={this.onSubmit.bind(this)}>
        <WeField label="姓名" name="name">
          <WeInput placeholder="请输入姓名"></WeInput>
        </WeField>
        <WeField label="验证码" name="code">
          <WeInput placeholder="请输入验证码"></WeInput>
        </WeField>
        <WeField label="选择区县" name="dicts">
          <WePicker range={selector} rangeKey="value" placeholder="请选择区县"></WePicker>
        </WeField>
        <Button formType="submit">使用formType提交</Button>
        <Button style="margin-top:10px;" onClick={this.handleClickSubmit.bind(this)}>
          使用form-refs提交
        </Button>
      </WeForm>
    );
  }
}

FormProps

RefHandler