recact class 转函数组件

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)