Skip to content

kne-union/react-form-antd

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-form-antd

描述

把 @kne/react-form 表单校验逻辑应用到antd

安装

npm i --save @kne/react-form-antd

概述

特点

  • UI分离,支持自定义UI框架。提供了antd的组件封装 @kne/react-form-antd 和 taro的组件封装 @kne/react-form-taro
  • 分级校验规则配置,校验规则支持异步校验
  • 事件驱动,方便灵活扩展。可以通过debug选项配置,通过触发事件顺序和参数轻松调试
  • 支持包含Group的复杂表单,子表单

示例

示例代码

  • 这里填写示例标题
  • 这里填写示例说明
  • reactFormAntd(@kne/current-lib_react-form-antd),(@kne/current-lib_react-form-antd/dist/index.css),antd(antd)
const {Button} = antd;
const {default: Form, Select, Input, Group, GroupList, SubmitButton, DatePickerToday, Rate, Slider} = reactFormAntd;
const {useRef} = React;

const Example = () => {
    const addButton = useRef();
    return <Form debug>
        <Select name="select" label="哈哈哈" options={[{label: 'sss', value: 1}]}/>
        <Input name="name" label="名称" realtime rule="REQ LEN-0-4"/>
        <Input.Password name="password" label="密码"/>
        <Rate name="rate" label="评分"/>
        <Slider name="slider" label="滑动条"/>
        <br/>
        <Input name="target[0].name" label="名称"/>
        <Input name="target[0].des" label="描述"/>
        <Input name="target[1].name" label="名称"/>
        <Input name="target[1].des" label="描述"/>
        <br/>
        <div>
            <Button onClick={() => {
                addButton.current.onAdd();
            }}>添加</Button>
        </div>
        <GroupList name="list" ref={addButton}>
            {({onRemove}) => {
                return <div>
                    <Button onClick={onRemove}>删除</Button>
                    <Input name="name" label="名称"/>
                    <Input name="des" label="描述"/>
                </div>;
            }}
        </GroupList>
        <DatePickerToday label="时间" name="time" selectToday={true}/>
        <SubmitButton>提交</SubmitButton>
    </Form>
};

render(<Example/>);

API