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;