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

| 参数 | 类型 | 说明 | 必填 | | :------- | :----- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--- | | rules | object | 表单的校验规则，key 要对应 WeField 中设置的 name， value 为数组对象，属性有 required:boolean（是否必填）、message:string（提示文案）、patten:regex（正则表达式）、custom:void（自定义规则，必须返回 boolean） | ✔️ | | data | object | 表单中每个组件的初始值 | ✔️ | | onSubmit | void | 设置了 formType='submit'的 Button 组件点击时会触发，通过 ref 的 submit 提交也会触发，返回表单 state | |

RefHandler

| 名称 | 说明 | | :-------- | :------------------------------------------------------------- | | formState | 表单的数据 | | validate | 校验整个表单，获取校验结果（但不显示提示文案），不触发提交事件 | | submit | 校验表单并提交，显示校验错误的提示文案 | | setValue | 设置单个表单的输入内容 | | getValue | 获取表单的所有输入信息 |