1.antd from 的使用方法
import { Modal, Form, Input } from '@chaoswise/ui';
const KnowledgepopUp = ()=>{}
export default Form.create()(KnowledgepopUp)
具体如下
import React, { useState, useEffect } from 'react'
import { Modal, Form, Input } from '@chaoswise/ui';
const KnowledgepopUp = (props) => {
let { setVisible, visible, handleOk, title, checkObj, form } = props;
const { getFieldDecorator } = form;
const [formData, setFormData] = useState({
catalog: "",
business: "",
process: ""
})
useEffect(() => {
if (title == '编辑知识推荐') {
let obj = {
catalog: "111",
business: "111",
process: "111"
}
setFormData(obj)
}
return () => {
setFormData({})
}
}, [visible])
const handleCancel = e => {
setVisible(false)
};
const handleSubmit = () => {
}
return (
<div>
<Modal
title={title}
visible={visible}
onOk={()=>handleOk(form,'')}
onCancel={handleCancel}
>
<Form layout='horizontal'>
<Form.Item
label="知识目录"
required
// validateStatus={inputValue.length > 30 ? "error" : "validating"}
>
<Input
placeholder="请输入知识名目"
showCount
suffixLength={30}
onBlur={() => handleBlur('catalog')}
value={formData.catalog}
onChange={(e) => setFormData({ ...formData, catalog: e.target.value })}
/>
</Form.Item>
<Form.Item
label="业务系统"
// validateStatus={inputValue.length > 30 ? "error" : "validating"}
>
{getFieldDecorator('business', {
rules: [{ required: true, message: 'Please input your note!' }],
})(<Input
placeholder="请输入业务系统"
showCount
// suffixLength={30}
// value={formData.business}
// onChange={(e) => setFormData({...formData,business:e.target.value})
/>)}
</Form.Item>
<Form.Item
label="流程类型"
required
>
<Input
placeholder="请输入流程类型"
showCount
suffixLength={30}
value={formData.process}
onChange={(e) => setFormData({ ...formData, process: e.target.value })}
/>
</Form.Item>
</Form>
</Modal>
</div>
)
}
export default Form.create()(KnowledgepopUp)