React后台管理项目疑难点整理(一)——Form表单版本不同

From表单组件因为antd的版本更新，导致教学视频里的3.0x和目前的4.0x很多不一样，甚至视频中用到的核心方法都弃用了，经过两天的研究，目前的解决方案如下，

此次也算是本人第一次发现问题不再是简单的百度就能解决，需要到处看官方文档及例子，以及别人的帖子等资料，再加上自己挨着测试新方法的使用，因为视频中的方法使用的逻辑已经不适合当前，还得重新寻找解决方法，换思路用完全不同的办法达到想要的效果，虽然时间花了两天，但是收货还是颇丰

昨天写过一篇记录问题的解决，但是那是比较杂乱的，此文会是总结，阐述具体情景，以及解决思路等，给自己以后留下记录

情景及目的：

要利用antd的Form组件构建一个如下图所示的列表，以及完成添加，修改的操作

点击修改分类会弹出Modal组件，里面会预先填好当前要修改的分类名字，并不是用placeholder，placeholder和这个value第一颜色不一样，第二无法修改，如果我想写 ‘神奇女侠2’ ，还得全部重新打字，但是如果value直接预设好，只需要在后面写2就好；
点击ok后会根据目标id修改分类名字，并重新渲染展示分类列表
notice：填写一个后点击ok，或者Cancel，再次点击另一个修改分类，不能保留有上一次修改的输入的value，必须每次都是该分类的默认值

点击添加后，展示需要添加分类的父目录id，以及需要添加的分类名称，父分类是下拉框，可选，但是默认当前父分类；

notice：可以在二级列表下给一级列表或者兄弟二级列表添加分类，只需要在下拉框中选取即可，但是如果不是给当前分类添加，则点击ok后不要进行渲染，在点回上级列表或者兄弟列表的时候再渲染

教学视频的做法是利用Form.create()方法，包装整个组件，这样会自动创建一个form对象，可以使用form对象中的一系列方法（从this.props.form中取），包括但不限于，设定初始值initialValue,获取值getFieldsValue，设置值setFieldsValue等


代码片段截图，具体就不展示了


问题
现在的问题是Form.create()方法已经弃用，所以不能将其包装成props含有form对象的组件进行export了，
查看了4.0x的文档后发现，如果要使用上述中的一些方法，比如validate，getFieldsValue等还是得需要form对象

所以思路是先看，我需要的方法在新版本的地方，可以直接ctrl+f网页查找，把之前的方法复制进去，找到对应的地方，
看看这个方法所属有无变化，再依次往上找，
比如getFieldsValue方法处于FormInstance中，即Form 的实例对象，再去找FormInstance的所在，这个时候就找到了跟视频中对应的form对象了，但是文档没有说怎么得出这个form对象。
这个时候往上找貌似没有文档了，已经到头了，但是没有得到目标，可以去看上方的例子，找到用到form对象的例子，就一定会有怎样得到form对象的，举一反三便是

1️⃣ ctrl+f网页查找之前的方法，找到对应的地方

2️⃣ 得到处于FormInstance，查找FormInstance

3️⃣ 找到form，下一步是查找如何将form得到

5️⃣ 找到使用form的例子，根据例子学习，根据4️⃣搜索Form.useForm()找到form


6️⃣ 得到可以用ref获取，并且有例子可以模仿，可以看到可以通过给Form组件添加ref，可以得到一个对象，这个对象中的current里面包含了想要的一系列方法

可以看到例子中使用this.formRef.current是在组件函数中，但是我的目的是导出去，在父组件里面使用，所以必须加以改造，于是我导出组件的时候需要给Form加一个函数式通信方式props，
然后放到onValuesChange()里面，只要value发生改变，就通过props导出，将其添加到父组件的属性上（2021.4.19补充括号内的提醒，这种做法效率不高，因为每次input输入都会传出，但是只有最后一次完成的时候，传出的才能用，其他的都是冗余的，没有进行防抖，主要也是因为笔者当时还没接触到防抖节流，知道效率不高也没啥办法，当时能想出这种办法就挺高兴了），具体代码如下：

以UpdateForm为例
父组件

updateCategory = async () => {
   


        // 表单验证通过后菜进行处理,validateFields()方法使用形式也改变了，显示是promise形式
        const deliForm = this.deliForm
        deliForm.validateFields()
            .then(async (values) => {
   
                console.log('验证成功');
                console.log('我是update的values', values);

                // 隐藏确认框
                this.setState({
   
                    showStatus: 0
                })

                //准备数据
                const categoryId = this.category._id
                //from是从setForm传出来的，其实麻烦了，只需要deliForm一个函数就行了
                const categoryName = this.form.props.value
                //发请求，更新分类