@kne/react-form-antd-taro
v3.0.0
Published
Downloads
213
Keywords
Readme
react-form-antd-taro
安装
npm i --save @kne/react-form-antd-taro
概述
这里填写组件概要说明
示例
示例代码
- 这里填写示例标题
- 这里填写示例说明
- form(@kne/react-form-antd-taro),antd(@kne/antd-taro)
const {default: Form, Input, TextArea, CheckList, SubmitButton, Picker, InputNumber, Selector, Slider, Switch} = form;
const {List, Button} = antd;
const {useRef} = React;
const BaseExample = () => {
const formApi = useRef();
return <Form ref={formApi} data={{
name: '哈哈哈', des: '描述描述'
}} onSubmit={(data) => {
console.log(data);
}}>
<Button onClick={() => {
formApi.current.setFields([{name: 'name', value: '哈哈哈哈啊啊啊'}, {
name: 'des',
value: '描述描述描述描述描述描述描述描述描述描述'
}]);
}}>设置Form值</Button>
<List>
<Input.Item name="name" label="名称" labelTips="哈哈哈" rule="REQ LEN-0-10"/>
<CheckList.Item name="type" label="类型"
options={[{label: '早上', value: '1'}, {label: '中午', value: '2'}, {
label: '下午', value: '3'
}, {label: '晚上', value: '4'}]}/>
<Picker.DateRangePicker.Item name="time" label="时间"/>
<InputNumber.Item name="num" label="数量"/>
<Switch.Item name="isPass" label="是否通过"/>
<Selector.Item name="status" label="状态"
options={[{label: '良好', value: '1'}, {label: '一般', value: '2'}, {
label: '很差', value: '3'
}]}/>
<Slider.Item name="level" label="等级"/>
<TextArea.Item name="des" label="描述" rule="LEN-0-100"/>
</List>
<SubmitButton>提交</SubmitButton>
</Form>;
};
render(<BaseExample/>);
API
|属性名|说明|类型|默认值| | --- | --- | --- | --- |