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;