React design Model 模态框中加入表单，并进行提交

                                                   React design Model 模态框中加入表单

一、我要实现的功能：选中表格中的一行数据进行编辑，编辑方式为，弹出模态框，显示相应的数据，并进行表单提交操作，从而实现数据的修改，界面如下图：

二、说一说我遇到的问题，那就是在获取表单数据，使用setFieldsValue,对表单进行赋值时报了错，报错如下图：

分析一下原因，我这里我是使用了refs去获取form对象，我们看一下页面代码：

这个代码的作用就是，弹出模态框，并显示表单。注意看：我这里ref={this.formRef}是写在了Form组件里，弹出模态框时，表单也显示了，但为什么没有获取到setFieldsValue呢？经过查询资料可以知道：可以通过React.createRef()创建Refs并通过ref属性联系到React组件。Refs通常当组件被创建时被分配给实例变量，这样它们就能在组件中被引用。从这句话中可以看出，form组件并没有被创建，所以无法获取到实例变量。

但这里有一个很诡异的情况，那就是我们先用form表单进行submit提交数据后，它却能够获取到setFieldsValue对象了，也不会报之前的错了。

这里特此说明下，就是一开始点击编辑，并没有创建form组件，无法获取到refs对象，当进行数据添加后，表单触发refs，创建了refs对象，所以再次点编辑就是正常的。

三、说一说解决办法：

这里我查询了官方的文档，在里面找到了答案，这里就不用过多的重复说，看了文档代码你就明白了：

文档网址：https://ant.design/components/form-cn/#components-form-demo-register

文档网址：https://ant.design/components/form-cn/

这里只是对自己在学习中遇到的一些困难做一下记录，里面还有许多没有弄清楚的地方，希望哪个大神看到了，能带带我。

有问题请联系我：[email protected]

编写人：洪伟富