antd框架表单组件这种情况下，该如何实现重置

#1

因为手机验证需要用到的地方比较多，所以单独提取封成一个组件，但是在表单重置操作时卡住了，该如何操作，才能通过外部把组件里的组件重置？

%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20190618132956

%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20190618133315

#3

this.props.form.resetFields();

#4

谢谢回复。它可以重置直接挂在getFieldDecorator()上的antd组件，但是对于自定义的组件不可以。

#5

返回antd文档例子看了几个，发现有个类似的例子，于是乎就解决了:sweat:
1.this.props.onChange：antd传到自定义组件中，可以直接修改Form.Item绑定的属性值（modile）;
2.getDerivedStateFromProps：监听自定义组件props的值变化，可以直接修改自定义组件（Modile）的state值。
通过1和2就形成了内外数据的绑定。

%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20190619175537

%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20190619175558

antd相关示例
%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20190619180732

#6

对于这种自定义组件在开发项目中肯定要用到，楼主中说到的两点1.this.pros.onChange这个是把自定义组件数值更新到Form.item绑定的数值上，2 getDerivedStateFromPros是处理自定义组件显示的数值很重要，另外需要注意的是如果你自定义组件绑定的数据是数组或者对象的时候，在进行form.resetFields操作时会发现Form.item上值已经清空单自定义组件的值确依然显示没有滞空，大坑，因为在进行resetFields时候props传到子组件的数值是一个undefined不是自己想要的对象形式返回，所以页面数据没有滞空