react-form-art

1.0.5 • Public • Published

react-form-design

Demo online

在线查看

install

npm i react-form-art -S

API

Form

属性 说明 类型 默认值
className form 标签类名 string ''
initValues 表单项统一初始化 Object {}
onFinish 表单提交触发 Function {}
onFinishFailed 表单提交触发 Function {}
ref 可获取表单仓库实例方法 React.RefObject {}
FormItem
属性 说明 默认值 版本
className FormItem 容器的类名 string -
labelClassName label 的类名 string -
controllClassName 表单项所在容器的类名 string -
requiredClassName 必填标识的类名 string -
requiredIcon 自定义必填标识 icon React.ReactNode -
label label 标签的文本 React.ReactNode -
labelWidth label 标签的文本 number -
name 表单项字段名称 string -
rules 表单项校验逻辑, message 属性针对 rule 为 RegExp 触发 { rule: RegExp 或者 Function:(value, call)=> {call(null)}, message: '' } -
trigger 表单项更改的方法名 string 'onChange'
validateTrigger 表单项规则校验触发的方法名 string 'onBlur'
required 表单项是否必填 Boolean false
messageShow 表单项错误提示类型, 错误的时候提示,成功的时候提示,都提示 'failed'/'success'/'all'/'hidden' 'all'

form 实例的方法

function Demo() {
  const form = React.useRef(null)
  return <Form ref={form}>...</Form>
}

form.current 的 API 如下:

属性 说明 类型
getFieldValue 传入表单主键,返回表单值 (key: String)=> FieldValue
getFieldsValue 获取所有表单值 Object => FieldValues
resetFields 重置表单所有值 values:Object => void
setFields 设置表单值 values:Object => void
submit 提交方法,回掉参数是否校验完成 (boolean, FieldValues) => void

基本使用

import { InputItem, Button, Picker } from "antd-mobile";
import Form from "react-form-art";
import React from "react";

const FormItem = Form.FormItem
const seasons = [
  [
    {
      label: '2013',
      value: '2013',
    },
    {
      label: '2014',
      value: '2014',
    },
  ],
  [
    {
      label: '春',
      value: '春',
    },
    {
      label: '夏',
      value: '夏',
    },
  ],
];

function Demo() {
  const form = React.useRef(null)
  React.useEffect(() => {
    console.log(form.current, '<form.current')
  }, [])

  const handleClick = () => {
    form.current.submit((t) => {
      console.log(t)
    })
  }

  return <div style={{ padding: '50px 20px 0 20px' }} >
    <Form
      initialValues={{ name: '我是初始值' }}
      ref={form}
      onFinish
    >
      <FormItem
        label="我的名称"
        labelWidth={150}
        name="name"
        required
        rules={{
          rule: /[\u4e00-\u9fa5]/,
          message: '名称仅支持中文',
        }}
        validateTrigger="onBlur"
      >
        <InputItem
          placeholder="请输入名称(中文)"
        />
      </FormItem>

      <div style={{ color: 'blue', marginBottom: 20 }}>
        (我的名称)输入字数大于两个 的时候要选择夏季
      </div>

      <FormItem
        label="季节选择"
        labelWidth={150}
        name="yearSeason"
        validateTrigger="onOk"
        trigger="onOk"
        messageShow="failed"
        rules={{
          rule: (values, call) => {
            if (form.current.getFieldValue('name').length > 2) {
              if (values[1] !== '夏') {
                call('此时要选择夏季')
              }
            } else call(null)
          }
        }}
      >
        <Picker
          data={seasons}
          title="选择季节"
          cascade={false}
        >
          <List.Item arrow="horizontal" style={{ width: 200 }} />
        </Picker>
      </FormItem>

      <Button onClick={handleClick}>提交</Button>
    </Form>
  </div>
}

export default Demo;

Package Sidebar

Install

npm i react-form-art

Weekly Downloads

0

Version

1.0.5

License

ISC

Unpacked Size

75.2 kB

Total Files

6

Last publish

Collaborators

  • zuolung